css 实现div 4个角尖角边框样式
Posted Leatitia
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 实现div 4个角尖角边框样式相关的知识,希望对你有一定的参考价值。
经常使用的一个小技巧,在不添加额外元素的情况下,使用background绘制div的4个角border
.is-active:before
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 100%;
height: 100%;
background: linear-gradient(to left, #f00, #f00) left top no-repeat,
linear-gradient(to bottom, #f00, #f00) left top no-repeat,
linear-gradient(to left, #f00, #f00) right top no-repeat,
linear-gradient(to bottom, #f00, #f00) right top no-repeat,
linear-gradient(to left, #f00, #f00) left bottom no-repeat,
linear-gradient(to bottom, #f00, #f00) left bottom no-repeat,
linear-gradient(to left, #f00, #f00) right bottom no-repeat,
linear-gradient(to left, #f00, #f00) right bottom no-repeat;
background-size: 1px 5px, 5px 1px, 1px 5px, 5px 1px;
以上是关于css 实现div 4个角尖角边框样式的主要内容,如果未能解决你的问题,请参考以下文章