Question

基于这个问题

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

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

这是小提琴

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

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

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：之后让它从一个角落到另一个角落。要执行此操作，只需调整宽度/高度属性，然后设置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乘18）

Answer 3

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

角度可以自动设置到角落。

可以使用calc

获得位置

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

fiddle

如何使对角边框适合角落

3 个答案: