我在 Photoshop 中有一个像这样的边的形状:
是否可以用CSS将重复的三 Angular 形做成边框?
最佳答案
您可以使用渐变来创建锯齿形图案背景,使用 ::after
伪元素将其应用为边框。
.header{
color: white;
background-color: #2B3A48;
text-align: center;
}
.header::after {
content: " ";
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 36px;
background: linear-gradient(#2B3A48 0%, transparent 0%), linear-gradient(135deg, #272220 33.33%, transparent 33.33%) 0 0%, #272220 linear-gradient(45deg, #272220 33.33%, #2B3A48 33.33%) 0 0%;
background-repeat: repeat-x;
background-size: 0px 100%, 9px 27px, 9px 27px;
}
<div class="header"><h1>This is a header</h1></div>
来源:CSS Zigzag Border with a Textured Background
JSFiddle:http://jsfiddle.net/kA4zK/
关于css - 在 CSS 中制作锯齿状三 Angular 形边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13774952/