지그재그 물결무늬
<style>
body {
background: #222226;
}
.zigzag {
background: #fff;
position: relative;
height: 200px;
box-shadow: 0 15px 10px rgba(0, 0, 0, .75);
z-index: 1;
}
.zigzag::after {
content: "";
display: block;
height: 30px;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: -webkit-linear-gradient(225deg, #fff 15px, transparent 0) 0 15px, -webkit-linear-gradient(315deg, #fff 15px, transparent 0) 0 15px;
background: linear-gradient(-135deg, #fff 15px, transparent 0) 0 15px,
linear-gradient( 135deg, #fff 15px, transparent 0) 0 15px;
background-position: top left;
background-repeat: repeat-x;
background-size: 30px 30px;
}
</style>
<div class="zigzag"></div>
결과보기
https://codepen.io/GhostRider/pen/myGWYj
