html中设置边框形状为齿状,在CSS中制作锯齿状的三角形边框

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

HTML：

This is a header

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;

}