jquery - 底部三 Angular 形的双边框+填充动画

我的网站右下角有一个三角形的按钮
代码：

#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;边框（仅左上角）
我还想在悬停时从右下角开始设置三角形的动画，但是这个功能不太重要。

最佳答案

根据评论更新了答案
我不确定（只是左上角），但这是你想要的吗。？
为了达到这个目的，我已经使用了: before，我也为你放了一些transition，希望这对你有帮助，如果还有什么需要的话，请一定要问我。
更改transition的值以使动画缓慢而快速。

transition: all 0.6s ease-in-out;

#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;
}

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