css3怎么实现锯齿边框？

Question

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

Answer 1

你这样的最好还是切图做用css3也达不到一毛一样的效果，如果你很想要尝试一下的话可以试试，不过边缘不是顺滑的感觉<div&nbsp;class="jagged"></div>.jagged {&nbsp; &nbsp; height: 200px;&nbsp; &nbsp; border: 2px solid #ccc;&nbsp; &nbsp; border-bottom: none;&nbsp; &nbsp; position: relative;}.jagged:after {&nbsp; &nbsp; content: '';&nbsp; &nbsp; display: block;&nbsp; &nbsp; height: 10px;&nbsp; &nbsp; background-size: 20px 20px;&nbsp; &nbsp; background-repeat: repeat-x;&nbsp; &nbsp; background-image: linear-gradient(135deg, transparent 45%, #ccc 55%, transparent 60%), linear-gradient(45deg, transparent 45%, #ccc 55%, transparent 60%);&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; bottom: -9px;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; right: 0;}顺便一提，比较完美的锯齿边可以这样写，虽然不适合你的情况.jagged {&nbsp; &nbsp;height: 200px;&nbsp; &nbsp;position: relative;}.jagged:after {&nbsp; &nbsp; content: " ";&nbsp; &nbsp; display: block;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; top: 0px;&nbsp; &nbsp; left: 0px;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 36px;&nbsp; &nbsp; background: -webkit-linear-gradient(#ccc 0%, transparent 0%),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; -webkit-linear-gradient(135deg, #fff 33.33%, transparent 33.33%) 0 0%,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transparent -webkit-linear-gradient(45deg, #fff 33.33%, #ccc 33.33%) 0 0%;&nbsp; &nbsp; background-repeat: repeat-x;&nbsp; &nbsp; background-size: 0px 100%, 9px 27px, 9px 27px;}