如何创建响应三角形作为右边界？

Question

我正在尝试为一个边框创建一个响应三角形，只有在hover时才可见。 我尝试了下面的代码，但它不起作用，因为它使用静态border-width 。 当我有一个单字符串（单行）链接时，它是完美的，但是当字符串更多（超过一行）时，它就失败了。

这里的例子

代码在这里：

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

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

Answer 1

您不能使用border三角形方法在此处创建三角形，因为元素的height是动态的。 相反，您可以使用以下任何替代方案：

内联SVG +剪辑路径： ^推荐

您可以使用内联SVG和clip-path来生成具有三角效果的条形。 所述clip-path仅当悬停在施加a标签等的正常状态下保持不受影响。 浏览器对此的支持比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 ，以产生形状。 父级有一个overflow: hidden设置，用于剪切不需要显示的三角形部分。

 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> 

或者，您可以使用两个伪元素和一个transform: skew(45deg)应用于它们（在相反的方向）以获得三角形形状。 这里父母也有overflow: hidden设置。

 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 （用于rotate方法）和left （用于skew方法）等属性进行一些调整，因此不建议这样做。

---

CSS剪辑路径：

您可以使用多边形clip-path创建一个在hover具有三角效果的条形图。 这里的缺点是浏览器支持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: 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> 

---

线性渐变：

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

 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> 

Answer 2

你有静态宽度边框：

border-width: 19px 0 19px 11px;

但元素的高度根据行数或文本大小而变化，因此如果更新为

border-width: 30px 0 30px 11px;

它将解决2行文本的问题，但不适合一行文本。 你将不得不检查元素的JS heigt并根据它更新：

border-width: 'dinamic result from JS'px 0 'dinamic result from JS'px  11px;