底部边框形状像\

Question

我正试图在像这样的盒子上悬停效果

我尝试使用透明的顶部和左侧边框，但我得到的只是底部边框额外的三角形，它指向另一个方向，例如

.news:hover {
  transform: translateY(20px);
  transform: translateX(-20px);
  border-left: 20px solid transparent;
  border-top: 20px solid transparent;
  border-bottom: solid #F4698D 20px;
  border-right: solid #F4698D 20px;
}

Answer 1

一种解决方案是使用::after创建一个伪元素。它位于左下角，与边框重叠，并具有类似于三角形的自己的渐变背景。

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

:root {
  --border-width: 10px;
}

div { 
  padding: 50px; 
  border-bottom: var(--border-width) solid transparent;
  border-right: var(--border-width) solid transparent;
  position: relative;
}

div:hover {
  border-color: red;
}

div:hover::after {
  content: '';
  position: absolute;
  display: block;
  height: var(--border-width);
  width:  calc(2 * var(--border-width));
  bottom: calc(-1 * var(--border-width));
  left: 0px;
  background: linear-gradient(to right top, white 50%, red 50%);
  z-index: 2;
}

<div>Hover me!</div>

Answer 2

Borders创建类似于框架的形状。

对此效果的另一种解决方案是使用:after和:before伪元素。您可以让他们用opacity: 0进行准备，然后将鼠标悬停在元素上，使其移至opacity: 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;
}

希望有帮助。