css3怎么实现锯齿边框？

Question

UI给的图是这样，想着用CSS实现下，试了一会儿，还是没好的思路，还请各位指教。

Answer 1

你这样的最好还是切图做
用css3也达不到一毛一样的效果，
如果你很想要尝试一下的话可以试试，不过边缘不是顺滑的感觉

 <div class="jagged"></div>

.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;
}

Answer 2

一个div。。加个图片背景上去。哈哈哈哈哈哈哈哈哈哈哈哈哈

Answer 3

背景图片做边框背景

Answer 4

css3锯齿边框