[css] CSS - 지그재그 톱날모양 물결무늬

지그재그 물결무늬

 

<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