<分区>
标签 html css css-shapes
<分区>
基于这个问题
How to add a gradient border above image (diagonal border)
我想做同样的，但是在一个小的 div 上，但是对 Angular 线不适合边框
这是 fiddle
http://jsfiddle.net/wo8gbhx3/36/
HTML
<div class="testing">
<ul>
<li class="selected unavailable">
<a href="#">
<img src="http://placehold.it/25x25"/>
</a>
</li>
</ul>
</div>
和 CSS
.testing ul {
list-style: none;
}
.testing ul li {
width: 20px;
height: 18px;
}
.testing ul li img {
width: 100%;
height: 100%;
display: block;
}
.unavailable {
position: relative;
}
.unavailable a:after {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: repeating-linear-gradient(135deg, transparent, transparent 16px, #000 18px);
z-index: 2;
}
最佳答案
调整 .unavailable a:after 规则的 background 属性中的间距:
background: repeating-linear-gradient(135deg, transparent, transparent 12px, #000 13px);
此外，由于您指定了 135 度 Angular ，因此这在正方形上效果最佳。所以我将 div 的宽度和高度调整为相等:
.testing ul li {
width: 18px;
height: 18px;
}
或者，您可以调整 Angular ，使矩形从一个 Angular 到另一个 Angular ，但线条可能看起来很粗糙。
关于html - 如何使对 Angular 线边框适合 Angular 落，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30810110/