CSS'te Nasıl Zikzak Border Yaparım ?

[Krons]

Başlıktan anlamışsınızdır herhalde :)
CSS'te yada HTML'de nasıl zikzak Border yapabilirim ?

[Kamil55]

html kodu:

Kod: Tümünü Seç Tümünü Kopyala

<div class="container1"></div>
<div class="container2 zigzag"></div>
<div class="container3 zigzag"></div>
<div class="container4 zigzag"></div>

Css Kodu:

Kod: Tümünü Seç Tümünü Kopyala

.container1 {
 width: 100%;
 height: 200px;
 background: #222;
}
.zigzag {
 position: relative;
 width: 100%;
 height: 200px;
}
.zigzag:before {
 content: "";
 display: block;
 position: absolute;
 top: -10px;
 width: 100%;
 height: 10px;
}
.container2 {
 background: #E2E2E2;
}
.container2:before {
 background:
   linear-gradient(
     45deg, transparent 33.333%,
     #E2E2E2 33.333%, #E2E2E2 66.667%,
     transparent 66.667%
   ),
   linear-gradient(
     -45deg, transparent 33.333%,
     #E2E2E2 33.333%, #E2E2E2 66.667%,
     transparent 66.667%
   );
 background-size: 20px 40px;
}
.container3 {
 background: #FFF;
}
.container3:before {
 background:
   linear-gradient(
     45deg, transparent 33.333%,
     #FFF 33.333%, #FFF 66.667%,
     transparent 66.667%
   ),
   linear-gradient(
     -45deg, transparent 33.333%,
     #FFF 33.333%, #FFF 66.667%,
     transparent 66.667%
   );
 background-size: 20px 40px;
}
.container4 {
 background: #CCC;
}
.container4:before {
 background:
   linear-gradient(
     45deg, transparent 33.333%,
     #CCC 33.333%, #CCC 66.667%,
     transparent 66.667%
   ),
   linear-gradient(
     -45deg, transparent 33.333%,
     #CCC 33.333%, #CCC 66.667%,
     transparent 66.667%
   );
 background-size: 20px 40px;