CARA MEMBUAT CSS TRIANGLE EFFECT
CARA MEMBUAT CSS TRIANGLE EFFECT – Biasanya css triangle effect ini digunakan untuk mempercantik tampilan comment box sehingga terkesan seperti sedang chatting online. Ide dasar dari pembuatan css efek segitiga ini menggunakan sebuah tampilan div kosong dengan border yang tebal.
 |
| css triangle effect |
TUTORIAL CARA MEMBUAT EFEK SEGITIGA DI BLOG
Cara pembuatan css triangle effect
1. Mulailah dengan menggunakan class div dengan height dan width kosong: width:0px;height:0px;
2. Pertebal border div tersebut misal: border-width:25px;
3. Tentukan jenis bordernya: border-style:solid;
4. Isikan warna border pada arah yang kita inginkan, selain itu beri warna transparan: border-color:transparent transparent #000 transparent;
 |
| css border |
Hasil dari ke empat langkah itu kemudian digabung menjadi kode class div css berikut ini dan saya namakan .segitiga
.segitiga {
width:0px;
height:0px;
border-width:20px;
border-style:solid;
border-color:transparent transparent black transparent;
}
Lalu bagaimana cara pemasangannya pada box comment? Sebagai pembantu agar lebih simpel kita gunakan CSS Pseudo Element :after dan :before. Masukan isi dari class segitiga diatas pada css pseudo element. Pada box comment beri posisi relativ dan pada efek segitiga ditambahkan posisi absolut. Tambahkan juga value 100% pada setiap top, left, dan bottom sesuai dengan posisi segitiga yang kita inginkan
.box-comment {
background:black;
position:relative;
padding:15px;
color:white;
font:normal 16px Calibri,Arial,Sans-Serif;
width:300px;
height:auto;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
.box-comment.top:before {
content:"";
width:0px;
height:0px;
position:absolute;
bottom:100%;
left:20px;
border-width:10px;
border-style:solid;
border-color:transparent transparent black transparent;
display:block;
}
.box-comment.right:after {
content:"";
width:0px;
height:0px;
position:absolute;
left:100%;
top:20px;
border-width:10px;
border-style:solid;
border-color:transparent transparent transparent black;
}
.box-comment.bottom:after {
content:"";
width:0px;
height:0px;
position:absolute;
top:100%;
left:20px;
border-width:10px;
border-style:solid;
border-color:black transparent transparent transparent;
display:block;
}
.box-comment.left:before {
content:"";
width:0px;
height:0px;
position:absolute;
right:100%;
top:20px;
border-width:10px;
border-style:solid;
border-color:transparent black transparent transparent;
}
Cara pemasangannya menggunakan kode HTML
<div class="box-comment top"> ... </div>
<div class="box-comment right"> ... </div>
<div class="box-comment bottom"> ... </div>
<div class="box-comment left"> ... </div>
Langkah cara pemasangan pada blogger:
1. Masuk Dashboard > Template > Edit Template > Proceed
2. Cari kode css comment-body, didalam isi {} masukan kode yang belum terdapat pada class box-comment diatas. Fiksasi nilai width dan heightnya
3. Masukan class pseudo element dan tentunya dengan sudah merubah box-comment dengan comment-body
4. Atur Margin dan padding pada comment-body sehingga tampilannya sudah dirasa fix dan enak dipandang mata
5. Atur warna sesuai dengan warna template, Lalu save template
Berikut ini hasil demo dari kode css triangle effect
Demikian tutorial CARA MEMBUAT CSS TRIANGLE EFFECT semoga bisa mempercantik tampilan blog kamu. Untuk penjelasan lebih detailnya silahkan lihat source
