css3优惠卷上方锯齿_css3怎么实现锯齿边框？

你这样的最好还是切图做

用css3也达不到一毛一样的效果，

如果你很想要尝试一下的话可以试试，不过边缘不是顺滑的感觉

.jagged {

height: 200px;

border: 2px solid #ccc;

border-bottom: none;

position: relative;

}

.jagged:after {

content: '';

display: block;

height: 10px;

background-size: 20px 20px;

background-repeat: repeat-x;

background-image: linear-gradient(135deg, transparent 45%, #ccc 55%, transparent 60%), linear-gradient(45deg, transparent 45%, #ccc 55%, transparent 60%);

position: absolute;

bottom: -9px;

left: 0;

right: 0;

}

顺便一提，比较完美的锯齿边可以这样写，虽然不适合你的情况

.jagged {

height: 200px;

position: relative;

}

.jagged:after {

content: " ";

display: block;

position: relative;

top: 0px;

left: 0px;

width: 100%;

height: 36px;

background: -webkit-linear-gradient(#ccc 0%, transparent 0%),

-webkit-linear-gradient(135deg, #fff 33.33%, transparent 33.33%) 0 0%,

transparent -webkit-linear-gradient(45deg, #fff 33.33%, #ccc 33.33%) 0 0%;

background-repeat: repeat-x;

background-size: 0px 100%, 9px 27px, 9px 27px;

}