Di Posting Oleh : Wandi febriandi
Kategori : Pelajaran Pemprograman web
Selamat datang kawan kawan di blog saya yang sederhana ini . Sebelumnya saya mau tanya bagaimana kabarnya kawan ? mudah mudahan sehat , amin . Di artikel sebelumnya saya telah berbagi mengenai operasi file bahasa c . Di artikel sebelumnya saya telah berbagi mengenai membuat program keliling dan luas persegi panjang , lingkaran , dansegitiga .
Oke lanjut sekarang saya akan membahas mengenai cara membuat segitiga di css . wah bro apaan buat segitiga di css ? eh jangan salah karena dengan segitiga kita bisa buat yang ginian .
Gimana tertarikkan .
Oke yang pertama kita buat aja dulu segitiga
HTML nya
<div id="segitiga"></div>
CSS nya
#segitiga{
width:0;
height:0;
border-left: solid 30px #F3DF1A;
border-top:solid 20px transparent;
border-right: solid 20px transparent;
border-bottom: solid 20px transparent;
}
Jadi kita hanya perlu border saja untuk membuat segitiga .
Oke lanjut sekarang kita akan membuat chat di css . petama kita buat dulu HTML
<div id="segitiga"></div>
CSS nya
#segitiga{
width:0;
height:0;
border-left: solid 30px #F3DF1A;
border-top:solid 20px transparent;
border-right: solid 20px transparent;
border-bottom: solid 20px transparent;
}
Jadi kita hanya perlu border saja untuk membuat segitiga .
Oke lanjut sekarang kita akan membuat chat di css . petama kita buat dulu HTML
<!DOCTYPE html>
<div class="segitiga">
assalammualaikum
<div class="segitiga1"></div>
</div>
<div class="segitigaa">
walaikum salam
<div class="segitiga2"></div>
</div>
Oke kalo sudah kita lanjut buat cssnya
/* background sama tulisannya */
.segitiga,.segitigaa{
max-width: 280px;
border-radius:10px;
padding:10px;
position:relative;
background-color: #F3DF1A;
margin: 20px;
font-family:sans-serif;
color: #fff;
}
/* background sama tulisannya END*/
/* Segitiganya */
.segitiga{
text-align:right;
}
.segitiga1,.segitiga2{
display:block;
position: absolute;
border-top: solid 20px #F3DF1A;
border-left:solid 10px transparent;
border-right: solid 10px transparent;
}
.segitiga1{
right:30px;
}
.segitiga2{
left:30px;
}
/* Segitiganya END*/
Kalo sudah gimana hasilnya lihat . hasilnya akan seperti ini . jadi untuk membuat segitiga kita hanya perlu border saja .
Oke kalo kalian udah pada tau dan udah pada bisa cara membuat segitiga di css . Semoga bermanfaat dan juga menambah wawasan mengenai pemprograman web . Oke terimakasih telah berkenan membaca artikel ini . Sampai jumpa di artikel yang lainnya yang lebih menarik dan juga lebih bermanfaat .
Ayo tanam ilmu sebanyak banyaknya .
dari segitiga bisa jadi banyak macam kalau dikembangkan...bermanfaat...trims sharednya...sukses.
ReplyDelete