html - 如何使对 Angular 线边框适合 Angular 落

标签 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 ,但线条可能看起来很粗糙。

例子: http://jsfiddle.net/wo8gbhx3/39/

关于html - 如何使对 Angular 线边框适合 Angular 落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30810110/

上一篇:html - 两列 div 布局,右列/div 中的内容未正确居中

下一篇:javascript - jquery 显示相同高度和宽度的图像

相关文章:

html - 如何用颜色替换语义 UI header 中的黑色?

html - input[type ="button"] 的值通过 css 更改为可复制的文本?

css - HTML - 将鼠标悬停在 div 上会影响多个 div?

html - 带有 HTML 和 CSS 的相邻圆圈

html - 侧面倾斜的形状(响应)

html - 使用 html、CSS 和提供的字形设计和 UI 元素

php - 我可以写入 SQL,但读取时一无所获

html - 你能用 CSS3 创建这个带阴影的渐变样式线吗?

javascript - 鼠标悬停时图像热点映射和弹出位置的问题

html - 为什么我的位置不是 : sticky element sticking in my flexbox container?