CSS Bulat Dan Segitiga Style

Assalamu'alaikum Wr.Wb.

CSS Bulat Dan Segitiga Style share posting kali ini merujuk bagaimana cara-nya Mojang dan Bujang membuat Efek Segitiga dan Lingkaran Bulat, Saya akan menjelaskan seperti apa dan bagaimana cara-nya Efek ini bisa tercipta dengan hanya CSS. Tentu saja nanti-nya Mojang dan Bujang dipersilahkan untuk ber-kreasi sesuka hati apabila sudah tau dan mengerti CSS-nya.

LINGKARAN BULAT MEMAKAI CSS :

BULAT

#buled {
background-color:#ff0000;
font: 20px Arial,Sans-serif;
text-align: center;
width: 75px; /* menentukan lebar bulatan */
height: 75px; /* menentukan tinggi bulatan */
padding: 30px;
-webkit-border-radius: 50%; /* pemberian nilai radius bulat */
-moz-border-radius: 50%;  
border-radius: 50%;
}

Ketika mencoba tanpa elemen width dan height hasil-nya menjadi lonjong, elemen width dan height ini adalah penambahan dari Saya karena awal-nya lingkaran bulat tidak dapat terbentuk dengan sempurna.

SEGITIGA MEMAKAI CSS :

Dasar pembuatan Efek Segitiga ini berasal dari 1(satu) Deklarasi seperti contoh diatas, namun tersirat dalam pikiran bagaimana menciptakan hanya segitiga saja seperti contoh dibawah ini :

Simple dan mudah kalau sudah tau rahasia-nya kunci sebenar-nya hanya pada elemen border-color : read green blue yellow, coba lihat sendiri sama Mojang dan Bujang dengan mengubah nilai-nya saja menjadi tranparent, script contoh segitiga diatas jadi-nya seperti ini :

.tiga{
width:0;
height:0;
border-width: 55px;
border-style: solid;
border-color: red transparent transparent transparent;
}

Bagaimana dengan Segitiga yang menghadap Kanan, Bawah dan Kiri. Mojang dan Bujang dapat mencoba sendiri biar lebih mengerti yang hasil-nya seperti dibawah ini :

Segitiga ke-Kanan

Sigitiga ke-Atas

Sigitiga ke-Kiri

Voaaalaa !!! Cuma segitu Mojang dan Bujang walau simple dan mudah tapi efek yang dihasilkan menurut Saya fantastis. Go Blog Go...!!! Amiin

Wassalam,