css3 锯齿花边 |css格式化横向

首先，大家需要设置一个div容器，并设置其宽高，并添加一些背景颜色：

<div class="jagged">
<p>CSS3 锯齿花边效果实现</p>
</div>

.jagged{
width: 300px;
height: 200px;
background-color: #f1c40f;
}

接下来，大家使用伪元素before和after来创建两个三角形，通过旋转和定位，使它们组成锯齿状。这里需要注意的是，在这两个三角形中，一个是left指向上方的三角形，另一个是right指向下方的三角形。代码如下：

.jagged:before, .jagged:after{
content: "";
width: 0;
height: 0;
position: absolute;
border-style: solid;
}
.jagged:before{
top: 0;
left: -10px;
border-width: 0 10px 10px 0;
border-color: transparent #f1c40f transparent transparent;
}
.jagged:after{
bottom: 0;
right: -10px;
border-width: 10px 0 0 10px;
border-color: #f1c40f transparent transparent transparent;
}

最后，大家还需要使用overflow:hidden;将容器的溢出部分隐藏起来，这样才能将锯齿花边的效果完美呈现出来。代码如下：

.jagged{
width: 300px;
height: 200px;
background-color: #f1c40f;
overflow: hidden;
position: relative;
}

这样，大家就成功实现了一个炫酷的CSS3锯齿花边效果。