我正在尝试为一个边框创建一个响应三角形,该边框仅在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;
}
}
}
}
}
最后一个链接失败。使用图像或图片不是解决问题的方法。
答案 0 :(得分:7)
您无法使用border
三角形方法在此处创建三角形,因为元素的height
是动态的。相反,您可以使用以下任何替代方案:
内联SVG +剪辑路径: 推荐
您可以使用内联SVG和clip-path
来生成具有三角效果的条形图。 clip-path
仅在悬停在a
标记时应用,因此正常状态不受影响。这个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;
}
&#13;
<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>
&#13;
<强>来变换:强>
您可以在伪元素上使用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;
}
&#13;
<!-- 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>
&#13;
或者,您可以使用两个伪元素并应用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;
}
&#13;
<!-- 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>
&#13;
这些可能是最接近具有良好浏览器支持的纯CSS解决方案。但是,当高度进一步增加时,他们仍然需要对padding-right
(适用于rotate
方法)和left
(适用于skew
方法)等属性进行一些调整,因此不会推荐使用。
CSS剪辑路径:
您可以使用多边形clip-path
在hover
上创建一个带三角效果的条形图。这里的缺点是浏览器对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;
}
&#13;
<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>
&#13;
线性渐变:
您也可以使用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;
}
&#13;
<!-- 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>
&#13;
答案 1 :(得分:0)
你有静态宽度边框:
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;