Membuat segitiga dengan css


logo 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

Membuat segitiga dengan css

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>

Membuat segitiga dengan css

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

Salah satu manfaat segitiga di css

Contoh membuat balon percakapan .

Jadi kali ini saya akan memcoba membuat seperti gambar di bawah . ini kawan .


Salah satu manfaat segitiga di css


<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

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel