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;

}