在CSS中制作锯齿状的三角形边框

前端之家收集整理的这篇文章主要介绍了在CSS中制作锯齿状的三角形边框前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个像Photoshop这样的边缘的形状:

是否可以使重复的三角形作为CSS的边框?

解决方法

您可以使用css3渐变来创建一个曲折图案的背景,使用后css伪应用它像一个边框。

HTML:

<div class="header"><h1>This is a header</h1></div>

CSS:

.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,#2B3A48 33.33%) 0 0%;
    background: -webkit-linear-gradient(#2B3A48 0%,-webkit-linear-gradient(135deg,#272220 -webkit-linear-gradient(45deg,#2B3A48 33.33%) 0 0%;
    background: -o-linear-gradient(#2B3A48 0%,-o-linear-gradient(135deg,#272220 -o-linear-gradient(45deg,#2B3A48 33.33%) 0 0%;
    background: -moz-linear-gradient(#2B3A48 0%,-moz-linear-gradient(135deg,#272220 -moz-linear-gradient(45deg,#2B3A48 33.33%) 0 0%;
    background-repeat: repeat-x;
    background-size: 0px 100%,9px 27px,9px 27px;
    }

资料来源:CSS Zigzag Border with a Textured Background

JSFiddle:http://jsfiddle.net/kA4zK/

猜你在找的CSS相关文章