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.

Cara Membuat Border Zigzag dengan CSS

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.

    Comments

    Popular posts from this blog

    Latihan Soal-soal Ujian SIM A/Umum, B/Umum, C, dan D

    Tips dan Trik Mudah Lulus Ujian SIM C Tanpa Nyogok Calo

    Informasi Lengkap Tempat Menghafal Al-Qur'an