如何创建响应三角形作为右边框？ [英] How to create responsive triangle as right border?

查看：95
本文介绍了如何创建响应三角形作为右边框？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想为一个边框设置一个响应三角形，只有在 hover 上才会显示。我尝试下面的代码，但它不工作，因为它使用静态 border-width 。当我有一个单字符串（单行）链接它是完美的，但当字符串更多（多于一行），它是失败。



此处的示例



在此处编码： / p> 

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


$ b b

最后一个链接失败。

解决方案

不能使用 border triangle方法来创建三角形，因为元素的 height 是动态的。您可以使用以下替代方法：



内联SVG +剪辑路径： 推荐



您可以使用内联SVG和 clip-path 生成具有三角效果的条形。 clip-path 仅在悬停在 a 标签时应用，因此正常状态保持不受影响。 浏览器支持的效果比CSS相当。



  ul {width：120px;} li {list-style-type：none;} a {position：relative;显示：block; padding：10px;颜色：＃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-shapeclipPathUnits =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;颜色：蓝色; text-decoration：none; padding：5px 25px 5px 5px; overflow：hidden;} a：after {content：''; position：absolute; top：50％;右：0％;高度：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;高度：100％; width：calc（100％ -  25px）; background-color：inherit; z-index：-1;} a：hover {background：crimson; background-clip：content-box; color：beige;}  

 <只是为了避免前缀，以便具有较旧浏览器的用户可以查看 - >< 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;显示：block; padding：10px;颜色：＃00f; text-decoration：none; overflow：hidden;} a：before，a：after {position：absolute; content：'';身高：50％; width：100％;左：-15％; z-index：-1;} a：before {top：0px; transform：skew（45deg）;} a：after {bottom：0px; {a：hover：before {a：hover：before} {background：crimson;} a：hover {color：beige;}
<！ - 包含的库只是为了避免前缀，以便用户可以查看较旧的浏览器 - >< 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;显示：block; padding：10px;颜色：＃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 和伪元素组合，如下面的代码段所示，但渐变已知会产生锯齿边缘，不推荐。



div class =snippetdata-lang =jsdata-hide =true> 

  ul {width：120px;} li {list-style-type：none;} a {position：relative;显示：block; padding：10px;颜色：＃00f; text-decoration：none;} a：after {content：''; display：none; position：absolute;右：-25px; top：0px; width：50px;高度：100％;背景：线性梯度（到左上角，rgba（0,0,0,0）50％，深红50％），线性梯度（右上角，深红50％，rgba（0,0,0,0） 50％）; background-size：50％50％;背景重复：无重复;背景位置：100％100％，100％0％; z-index：-1;} a：hover {background：crimson;} a：hover：after {display：block;}  

 <！ - 包含的库只是为了避免前缀，以便用户可以查看较旧的浏览器 - >< 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>


I am trying to make a responsive triangle for one border, which will be visible only on hover. I tried the below code but it doesn't work because it uses static border-width. When I have one-string (single line) link it's perfect, but when strings more (more than one line), it's failing.

Example here

Code 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 here:

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

The last link fails. Using an image or picture is not a solution for the problem.

解决方案

You cannot use the border triangle method to create the triangles here because the height of your element is dynamic. Instead you could use any of the following alternatives:

Inline SVG + Clip Path: Recommended

You can make use of inline SVG and clip-path to produce the bar with a triangle effect. The clip-path is applied only while hovering on the a tag and so the normal state remains unaffected. The browser support for this is much better than the CSS equivalent.

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>

Transforms:

You can use transform: rotate(45deg) on a pseudo-element to produce the triangle and then position it at the end of the a to produce the shape. The parent has a overflow: hidden setting to cut out the portions of the triangle that is not required to be displayed.

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>

Alternately, you could use two pseudo-elements with a transform: skew(45deg) applied to them (in opposite directions) to get the triangle shape. Here also the parent has overflow: hidden setting.

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>

These are probably the closest to pure CSS solutions with good browser support. However, they still needs some tweaking of the properties like padding-right (for rotate method) and left (for skew method) etc when the height increases further and hence is not recommended.

CSS Clip Path:

You can make use of a polygonal clip-path to create a bar with a triangle effect on hover. The drawback here is the poor browser support for 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>

Linear Gradients:

You can also use linear-gradient and pseudo-element combination like in the below snippet but gradients are known to produce jagged edges and are not really recommended.

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>

这篇关于如何创建响应三角形作为右边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆