Cara membuat segitiga dengan CSS3
Cara membuat segitiga dengan CSS3. Dalam optimasi sebuah website biasanya webmaster mengurangi beberapa gambar dalam halaman web yang diupload ke hosting tertentu. Agar waktu merender dan meload halaman bisa diminimalisir karena biasanya ukuran gambar terkadang besar.
Terkadang saat kita blogwalking sering kita menemui sebuah website dengan model-model tertentu dengan penambahan ornament-ornament tertentu contoh misal tanda panah. Anehnya load halaman tersebut tetap cepat dan normal seperti tidak ada pemanggilan javascript atau gambar dari hosting lain. Dan perlu kita ketahui sesungguhnya tanda panah tersebut adalah sebuah segitiga yang dibuat dengan CSS3.
Sebenarnya tehnik ini sudah lama dibahas oleh web lain. Namun disini saya cuma ingin mendokumentasi dan mengingatkan sobat saja.😁 Mau tahu caranya? Simak tutorial cara membuat segitiga dengan CSS3 berikut ini.
Cara membuat segitiga dengan CSS3
Bagaimana caranya?Sebenarnya kita hanya memodifikasi aturan bordernya. Dalam membuat CSS kita diberi hak untuk menentukan jumlah / nilai border pada tiap sisi.
Maksudnya? 😕
Jika tinggi div dalam elemen dijadikan 0px, dan border atas dan bawah diberi warna transparan, kemudian border kanan dibuang, maka kita akan dapatkan bentuk segitiga. 😁
Contohnya seperti dibawah ini
Aturan pembuatannya :
.segitiga {
border-top: solid 20px transparent;
border-bottom: solid 20px transparent;
border-left: solid 20px #f80;
height: 0;
width: 0;
}
Kemudian sering juga kita lihat dibeberapa web menggunakan metode ini dengan menerapkannya pada balon percakapan.Seperti contoh dibawah
Assalamu'alaikum
Penulisan CSSnya adalah dengan memanfaatkan pseudo-element :after sebagai berikut
.balon {
position: relative;
max-width: 280px;
border-radius: 10px;
padding: 10px;
background: #4e9a06;
color: #fff;
}
.balon:after {
position: absolute;
content: '';
display: block;
position: absolute;
bottom: -20px;
left: 30px;
border-top: solid 20px #4e9a06;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
Bagaimana? Mudah bukan?😁
Dibawah ini adalah penerapan lain dalam membuat breadcrumb segitiga dengan CSS3 dengan memanfaatkan pseudo-element :before dan :after :
Demikian tutorial cara membuat segitiga dengan CSS3 semoga bermanfaat. Terima kasih telah membaca postingan Agung Jaka Nugraha
Sumber : meramukoding.jar2.net
