Javascript 底边形状像\

我想在这样一个盒子上制作悬停效果

我试过使用透明的上边框和左边框，但我得到的只是下边框额外的三角形指向另一个方向，就像这样

.新闻：悬停{ 转换：translateY20px； 转化：translateX-20px； 左边框：20px实心透明； 边框顶部：20px实心透明； 边框底部：实心F4698D 20px； 右边框：实心F4698D 20px； } 边框创建类似于框架的形状

这种效果的另一种解决方案是使用：after和：before伪元素。您可以让它们准备不透明度：0，然后在悬停元素时，将其设置为不透明度：1。像这样：

.news {
  postision: relative;
}
.news:before { // the bottom line
  bottom: -20px;
  Left: 0;
  height: 20px;
  width: 100%;
}
.news:after { // the right line
  right: -20px;
  top: 0;
  height: 100%;
  width: 20px;
}
.news:after { // here are properties for both pseudo elements
  content: '';
  position: absolute;
  visibility: hidden;
  opacity: 0;
  transition: .32s;
}
.news:hover {
  transform: translate(-20px, 20px);
}
.news:hover:before, .news:hover:after {
  opacity: 1;
  visibility: visible;
}

---

希望有帮助。

一个解决方案是使用：：after创建一个伪元素。它位于左下角，覆盖边界，并且有自己的渐变背景，类似于三角形

因为边框的宽度用于确定覆盖元素的高度、宽度和偏移量，所以我选择将该数字存储为CSS变量

：根{ -边框宽度：10px； } div{ 填充：50px； 边框底部：var边框宽度实心透明； 右边框：var边框宽度实心透明； 位置：相对位置； } div:悬停{ 边框颜色：红色； } div:hover:：after{ 内容：； 位置：绝对位置； 显示：块； 高度：可变边框宽度； 宽度：calc2*var边框宽度； 底部：calc-1*var边框宽度； 左：0px； 背景：右上角线性渐变，白色50%，红色50%； z指数：2； } 让我停下来！