Membuat segitiga dengan css

Membuat segitiga dengan css
Di Posting Oleh : wandi
Kategori : 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 .


Mau liat atau download source code aplikasi premium bisa disini.

Tweet