底部三角形+填充动画的双边框

Question

我的网站右下角有一个按钮，是一个三角形

代码：

#top-btn a, #top-btn-BG {
 position: fixed;
 right: 0;
 margin: 0; 
}

#top-btn a {
  z-index: 999;
  padding: 30px 30px 25px 35px;
  color: #707070;
  bottom: 0; right: 0;
}

#top-btn-BG {
  display: block;
  z-index: 950;
  border-width: 0 0 100px 100px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  bottom: 0; right: 0;
  width: 0; height: 0;
  -webkit-transform:rotate(360deg);
}

<div id="top-btn">
  <a href="...">up</a>
  <div id="top-btn-BG"></div>
</div>	

我想在三角形的外侧添加1px color: #000;边框（只是左上角）

我还希望在悬停时从右下方设置三角形动画，但此功能不太重要。

Answer 1

根据评论更新了答案

我不确定（只是左上角），但这是你想要的吗？

我已经使用: before来实现这一目标，我还为您提供了一些transition，希望如果有更多信息，请帮助我。

更改transition的值以使动画变得缓慢而快速。

transition: all 0.6s ease-in-out;

＆＃13;

＆＃13;

#top-btn a,
#top-btn-BG {
  position: fixed;
  right: 0;
  margin: 0;
}

#top-btn a {
  z-index: 999;
  padding: 30px 30px 25px 35px;
  color: #707070;
  bottom: 0;
  right: 0;
}

#top-btn-BG {
  display: block;
  z-index: -7;
  bottom: -30px;
  right: -70px;
  width: 172px;
  height: 100px;
  transform: rotate(135deg);
  background: transparent;
  overflow:hidden;
  border-bottom: 1px solid #000;
}

#top-btn-BG:after {
  content: '';
  display: block;
  z-index: 950;
  border-width: 0 0 124px 125px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  
  bottom: 100px;
  right: -2%;
  width: 42px;
  height: 0;
  position: relative;
  transition: all 0.6s ease-in-out;
}

#top-btn a:hover+#top-btn-BG:after,#top-btn-BG:hover:after {
  bottom: 15px;
}

＆＃13;

<div id="top-btn">
  <a href="...">up</a>
  <div id="top-btn-BG"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用before元素尝试以下代码。

＆＃13;

＆＃13;

#top-btn a, #top-btn-BG {
 position: fixed;
 right: 0;
 margin: 0; 
}

#top-btn a {
  z-index: 999;
    padding: 55px 25px 26px 55px;
    color: #707070;
    bottom: 0;
    right: 0;
    border: 1px solid #000;
    border-left: 0;
    border-top: 0;
}
#top-btn a:before {
    content: "";
    border-bottom: 1px solid #000;
    position: absolute;
    left: -23px;
    top: 45px;
    z-index: 9999;
    width: 150px;
    transform: rotate(135deg);
}
#top-btn-BG {
  display: block;
  z-index: 950;
  border-width: 0 0 100px 100px;
  border-color: transparent transparent red transparent;
  border-style: solid;
  bottom: 0; right: 0;
  width: 0; height: 0;
  -webkit-transform:rotate(360deg);
}

＆＃13;

<div id="top-btn">
  <a href="...">up</a>
  <div id="top-btn-BG"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

希望它会对你有所帮助。