css – 如何创建响应三角形作为右边框？

我正在尝试为一个边框创建一个响应三角形,只有在悬停时才可见.我尝试了下面的代码,但它不起作用,因为它使用静态边框宽度.当我有一个单字符串(单行)链接时,它是完美的,但是当字符串更多(超过一行)时,它就失败了.

Example here

代码在这里：

<ul>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Lorem ipsum</a></li>
  <li><a href="#">Lorem ipsum dolor sit amet</a></li>
</ul>

SCSS在这里：

ul{
  width:120px;
  li{
    list-style-type: none;
    a{
      position:relative;
      display:block;
      padding:10px;
      color:#00f;
      text-decoration: none;
      &:hover{
        color:#fff;
        background:#00f;
        &:after{
          content:'';
          position: absolute;
          top: 0;
          right: -5px;
          height: 0;
          border-style: solid;
          border-width: 19px 0 19px 11px;
          border-color: #fff #fff #fff #00f;
        }
      }
    }
  }
}

最后一个链接失败.使用图像或图片不是解决问题的方法.

您不能使用边框三角形方法在此处创建三角形,因为元素的高度是动态的.相反,您可以使用以下任何替代方案：

内联SVG剪辑路径：推荐

您可以使用内联SVG和剪辑路径来生成具有三角效果的条形.剪辑路径仅在悬停在标签上时应用,因此正常状态不受影响.这个browser support比CSS等同得多.

ul {
  width: 120px;
}
li {
  list-style-type: none;
}
a {
  position: relative;
  display: block;
  padding: 10px;
  color: #00f;
  text-decoration: none;
}
a:hover {
  -webkit-clip-path: url(#clip-shape);
  -moz-clip-path: url(#clip-shape);
  clip-path: url(#clip-shape);
  background: crimson;
}

<svg width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0,0 0.8,0 1,0.5 0.8,1 0,1" />
    </clipPath>
  </defs>
</svg>

<ul>
  <li><a href="#">Lorem ipsum</a>
  </li>
  <li><a href="#">Lorem ipsum</a>
  </li>
  <li><a href="#">Lorem ipsum dolor sit amet</a>
  </li>
</ul>

转换：

您可以在伪元素上使用transform：rotate(45deg)来生成三角形,然后将其放置在a的末尾以生成形状.父级有一个溢出：隐藏设置,用于剪切不需要显示的三角形部分.

ul {
  width: 120px;
}
li {
  list-style-type: none;
}
a {
  position: relative;
  display: inline-block;
  color: blue;
  text-decoration: none;
  padding: 5px 25px 5px 5px;
  overflow: hidden;
}
a:after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0%;
  height: 100%;
  width: 100%;
  background-color: inherit;
  transform-origin: 100% 0;
  transform: rotate(45deg);
  z-index: -1;
}
a:before {
  position: absolute;
  content: '';
  top: 0px;
  left: 0px;
  height: 100%;
  width: calc(100% - 25px);
  background-color: inherit;
  z-index: -1;
}
a:hover {
  background: crimson;
  background-clip: content-box;
  color: beige;
}

<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<ul>
  <li><a href="#">Lorem ipsum</a>
  </li>
  <li><a href="#">Lorem ipsum</a>
  </li>
  <li><a href="#">Lorem ipsum dolor sit amet</a>
  </li>
</ul>

或者,您可以使用两个伪元素和一个变换：skew(45deg)应用于它们(在相反的方向)以获得三角形形状.这里父母也有溢出：隐藏设置.

ul {
  width: 120px;
}
li {
  list-style-type: none;
  margin-bottom: 10px;
}
a {
  position: relative;
  display: block;
  padding: 10px;
  color: #00f;
  text-decoration: none;
  overflow: hidden;
}
a:before,
a:after {
  position: absolute;
  content: '';
  height: 50%;
  width: 100%;
  left: -15%;
  z-index: -1;
}
a:before {
  top: 0px;
  transform: skew(45deg);
}
a:after {
  bottom: 0px;
  transform: skew(-45deg);
}
a:hover:after,
a:hover:before {
  background: crimson;
}
a:hover{
  color: beige;
}

<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<ul>
  <li><a href="#">Lorem ipsum</a>

  </li>
  <li><a href="#">Lorem ipsum</a>

  </li>
  <li><a href="#">Lorem ipsum dolor sit amet</a>

  </li>
</ul>

这些可能是最接近具有良好浏览器支持的纯CSS解决方案.然而,当高度进一步增加时,它们仍然需要对诸如padding-right(用于旋转方法)和left(用于skew方法)等属性进行一些调整,因此不建议这样做.

CSS剪辑路径：

您可以使用多边形剪辑路径创建一个在悬停时具有三角效果的条形图.这里的缺点是CSS clip-path的浏览器支持不佳.

ul {
  width: 120px;
}
li {
  list-style-type: none;
}
a {
  position: relative;
  display: block;
  padding: 10px;
  color: #00f;
  text-decoration: none;
}
a:hover {
  -webkit-clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%);
  background: crimson;
}

<ul>
  <li><a href="#">Lorem ipsum</a>
  </li>
  <li><a href="#">Lorem ipsum</a>
  </li>
  <li><a href="#">Lorem ipsum dolor sit amet</a>
  </li>
</ul>

线性渐变：

您也可以使用线性渐变和伪元素组合,如下面的代码片段,但已知渐变会产生锯齿状边缘,并不是真正推荐的.

ul {
  width: 120px;
}
li {
  list-style-type: none;
}
a {
  position: relative;
  display: block;
  padding: 10px;
  color: #00f;
  text-decoration: none;
}
a:after {
  content: '';
  display: none;
  position: absolute;
  right: -25px;
  top: 0px;
  width: 50px;
  height: 100%;
  background: linear-gradient(to top left, rgba(0, 0, 0, 0) 50%, crimson 50%), linear-gradient(to top right, crimson 50%, rgba(0, 0, 0, 0) 50%);
  background-size: 50% 50%;
  background-repeat: no-repeat;
  background-position: 100% 100%, 100% 0%;
  z-index: -1;
}
a:hover {
  background: crimson;
}
a:hover:after {
  display: block;
}

<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<ul>
  <li><a href="#">Lorem ipsum</a>
  </li>
  <li><a href="#">Lorem ipsum</a>
  </li>
  <li><a href="#">Lorem ipsum dolor sit amet</a>
  </li>
</ul>