Membuat segitiga dengan css
Selamat datang kawan kali ini saya akan membagikan tips kepada kalian mengenai css . Di css ini membuat kotak sudah bisa membuat bulat atau oval sudah bisa dengan mudah dan sekarang saya akan berbagi mengenai cara membuat segitiga menggunakan css .
Membuat segitiga dengan css
Lansung saja kita coba buat , membuat segitiga kita bisa gunakan border . cukup garis serius .
<style>
.segitiga {
width:0;
height:0;
border-bottom:50px solid #efe310;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
</style>
<div class="segitiga"></div>
hasilnya
sekarang kita coba dengan cara yang lain posisi yang berbeda , misal ingin segitiga siku siku .
<style>
.segitiga {
width:0;
height:0;
border-left:50px solid #efe310;;
border-bottom:50px solid #efe310;;
border-top:50px solid transparent;
border-right:50px solid transparent;
}
</style>
<div class="segitiga"></div>
Buat apa sih segitiga ini ?
Baik mungkin ada yang bertanya tanya buat apa sih segitiga ini . Kalo saya jawab banyak sekali kita bisa membuat breadcrumb dan untuk mempercantik desain chat , dan kawan kawan .
Contoh membuat breadcrumb
<style>
.breadcrumb {
position: relative;
border-radius: 5px;
background: #10a5e0;
color: #fff;
list-style: none;
margin: 0;
padding: 0;
font-family:arial;
}
.breadcrumb:after {
display: block;
clear: both;
content: '';
}
.breadcrumb li {
float: left;
}
.breadcrumb a {
position: relative;
display: block;
padding: 10px 15px;
line-height: 20px;
color: #fff;
text-decoration:none;
}
.breadcrumb a:after {
content: '';
display: block;
position: absolute;
z-index: 2;
right: -4px;
top: 0;
border-left: solid 10px #10a5e0;
border-top: solid 20px transparent;
border-bottom: solid 20px transparent;
}
.breadcrumb a:before {
content: '';
display: block;
position: absolute;
z-index: 1;
left: -5px;
top: 0;
border-left: solid 10px #888;
border-top: solid 20px transparent;
border-bottom: solid 20px transparent;
}
.breadcrumb li:first-child a:before,
.breadcrumb li:last-child a:after {
display: none;
}
</style>
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Pemprograman web</a></li>
<li><a href="#">CSS</a></li>
</ul>
hasilnya
Contoh membuat balon percakapan .
Jadi kali ini saya akan memcoba membuat seperti gambar di bawah . ini kawan .
<style>
.balon{
position: relative;
max-width: 280px;
border-radius: 10px;
padding: 10px;
background: #10a5e0;
color: #fff;
margin-bottom:31px;
font-family:arial;
}
.balon:after{
position: absolute;
content: '';
display: block;
position: absolute;
bottom: -20px;
border-top: solid 20px #10a5e0;
border-left: solid 10px transparent;
border-right: solid 10px transparent;
}
.balon-t:after {
left: 30px;
}
.balon-j:after {
left: 234px;
}
</style>
<div class="balon balon-t">
Gimana sehat bro ?
</div>
<div class="balon balon-j">
alhamdulillah sehat.
</div>
Sebenarnya masih banyak lagi manfaat dari segitiga ini . Terimakasih telah berkenan membaca artikel ini dan sampai jumpa . Semoga bermanfaat .
Belum ada Komentar untuk "Membuat segitiga dengan css"
Posting Komentar