in

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 .

Written by admin