Cara Membuat Border ZigZag dengan CSS

Masuk hari kedua tahun 2015, dengan keterbatasan ide saya akan menuliskan tutorial cara membuat garis border berupa zigzag. Sumber ini saya ambilkan dari bradsknutson.com. Penampakannya kawan bisa lihat pada bagian footer web ini. Saya menggunakan teknik CSS dan HTML.

Bagi yang suka otak-atik CSS, mungkin ini sangat menyenangkan. Kita tidak lagi mendesain menggunakan garis solid horizontal saja, namun kita bisa menggunakan dengan garis zigzag. Mungkin ini terlihat lebih menyenangkan. Berikut tutorialnya:

Kode CSS

.border-zigzag {position: relative; width: 100%; min-height: 50px;margin-top:40px;}
.border-zigzag:before { content: ""; display: block; position: absolute; top: -10px; width: 100%; height:10px;}
.garis-border {background: #000;}
.garis-border:before { background: linear-gradient( 45deg, transparent 33.333%, #000 33.333%, #000 66.667%,transparent 66.667% ),linear-gradient(-45deg, transparent 33.333%,#000 33.333%, #000 66.667%, transparent 66.667% );background-size: 20px 40px;}

Kode HTML

<div class ='garis-border border-zigzag'></div>  

Keterangan :

• Untuk mengatur Tinggi-rendahnya area ditengah-tengah garis anda hanya memodifakasi bagian min-height: 50px sesuai dengan keinginan anda.
• Untuk bagian HTML, anda letakkan sesuai dengan keinginan anda. 
• Jika anda ingin mencoba mengotak-atik, silahkan coba pada DEMO [Klik]

Selamat berkreasi dan mencoba.

sumber : http://bradsknutson.com/blog/css-zig-zag-border/

Newer Post Older Post