如何使对角线边框适合角落[重复]

Question

基于这个问题

How to add a gradient border above image (diagonal border)

我想在一个小 div 上做同样的事情，但对角线不适合边框

这是小提琴

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

Answer 1

调整.unavailable a:after规则的background属性中的间距：

background: repeating-linear-gradient(135deg, transparent, transparent 12px, #000 13px);

此外，由于您指定了 135 度角，因此这在正方形上效果最佳。所以我把 div 的宽度和高度调整为相等：

.testing ul li {
  width: 18px;
  height: 18px;
}

或者，您可以调整角度以使其角到角形成一个矩形，但线条可能看起来很粗糙。

示例： http://jsfiddle.net/wo8gbhx3/39/

Answer 2

似乎因为您的对角线不完全位于左下角，所以您只需要倾斜您的 .unavailable a:after 以使其适合从一个角落到另一个角落。为此，只需像这样调整宽度/高度属性并设置right:0 而不是left。

.unavailable a:after {
  content: '';
  width: 25px;
  height: 18px;
  top: 0px;
  right: 0px;
  position: absolute;
  background: repeating-linear-gradient(135deg, transparent, transparent 16px, #000 18px);
  z-index: 2;
}

您可以看到您的updated Fiddle here。只是为了让您知道它会出现一点偏差，因为您的框甚至不是高度和宽度（您使用的是 20 x 18）

Answer 3

在现代浏览器中，您可以让它自动调整。

角度可以自动设置为角。

位置可以通过计算得到

background: linear-gradient(to top left, 
    transparent calc(50% - 1px), 
    black calc(50% - 1px), 
    black calc(50% + 1px), 
    transparent calc(50% + 1px));

fiddle