这个css 效果如何优化一下？
链接： https://codepen.io/oceanstick/pen/KKzjLvO
现在 hover 的时候如下：
目标： div里的内容是不固定的。希望这两条线，是div对角线位置，而不是固定的 45度？
<div class="siteType5"><a>
阿达撒旦法地方阿达撒旦法地方阿达撒旦法地方<br>
阿达撒旦法地方
</a>
</div>
/*scss*/
.siteType5 {
top:200px;
position:absolute;
z-index: 1;
a {
padding: 9px 5px;
color: #000;
font-weight: 700;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
transition: color 0.3s;
display: block;
}
a::before,
a::after {
position: absolute;
width: 100%;
left: 0;
height: 2px;
background: #b4770d;
content: '';
z-index: -1;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s, top 0.2s, bottom 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s, top 0.2s, bottom 0.2s;
transition: transform 0.3s, opacity 0.3s, top 0.2s, bottom 0.2s;
pointer-events: none;
}
a::before {
top: 0;
}
a::after {
bottom: 0;
}
a:hover,
a:focus {
color: #000;
}
a:hover::before,
a:hover::after,
a:focus::before,
a:focus::after {
opacity: 0.7;
}
a:hover::before,
a:focus::before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
}
a:hover::after,
a:focus::after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 50%;
}
}
回答
用 clip-path 切割出一窄条，没想到 clip-path: polygon 里也可以用 calc 达到 calc(100% - 2px) 这种效果。这样的话，你要的斜线也能顺利 clip 出来了，再加上 clip-path 是可以支持动画的，完美。
https://codepen.io/liuxiaole-the-sasster/pen/QWNeNKY
以上是 这个css 效果如何优化一下？ 的全部内容， 来源链接： utcz.com/a/50722.html
