Front-end

Membuat Layout segitiga

Tampilan segitiga di website

Tampilan segitiga di website

Tampilan segitiga berwarna putih seperti gambar sebuah element web di atas biasanya saya bikin menggunakan gambar. Gambar yang digunakan bisa berformat jpg atau png. Setahu saya, berikut cara-cara yang bisa diaplikasikan jika menggunakan gambar:

  • Gambar di gunakan sebagai background. Gambar background di tempatkan posisi atas-kanan,  menyetingnya dengan cara:
    div.kompor{
         background: #warnaBG url(../images/bg-segitiga.jpg) top right no-repeat;
    }
    

    Gambar yang dipakai buat background bisa berformat png atau juga jpg. Kalo png cukup potongan kecil dari pojok kanan hingga gambar segitiginya saja, kalau pakai jpg gambar hasil potongan dari pojok kiri hingga pojok kanan, batas bawahnya adalah sudut lancip bawah bentuk segitiga.
    Jadi intinya background yg diterapkan adalah background warna dan gambar maka letakkan gambar pada sisi paling atas seperti yg kita kehendaki, ohw iya kalau pake yang jpg pastikan betul warna backgroundnya sama persis antara code hexadecimal warnanya dng warna background pada gambar(pada contoh di atas berwarna biru)

  • Cara lainnya bisa menggunakan border, ternyata border bisa “diakalin” untuk membentuk segitiga. Caranya sebagai berikut:
    div.kompor:after {
        content: "";
        display: table;
        border-color: #FFFFFF rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
        border-style: solid;
        border-width: 30px 50px 0 0;
        display: inline-block;
        height: 0;
        position: absolute;
        right: 20px;
        top: 0;
        width: 0;
    }
    

    Cara ini sebenernya cara paling cerdik deh, jadi element .kompor:after itu dibuat eksis tapi kosong dengan mengeset property-nya tanpa value, kemudian dibuatlah garis border-nya senilai 30px dan 50px(itu border gede banget loh) tapi perhatiin deh, border tersebut hanya untuk top dan right sedangkan bottom dan left-nya Nol. Juga untuk warnanya, disitu ada 3 warna, warna putih untuk border top, warna hitam dengan alpha 0 untuk kiri dan kanan, dan yg terkahir hitam dengan alpha yg juga 0 untuk border bottom. Maka dengan cara yang cerdik  itu terbentuklah segitiga.

  • Kemudian cara yang berikutnya bisa menggunakan unicode:
    <span class="triangle">▲</span>

    dan di CSS-nya bisa diset warna atau bisa juga ditambahkan shadow, untuk ukuran di set menggunakan property font-size. Jadi diperlakukan sebagai font. Table unicode silahkan cek di SINI, lengkap kap kap.

  • Masih ada cara lainnya juga untuk membentuk segitiga menggunakan CSS. Yaitu dengan membentuk persegi yang di rotate 45 derajat, kemudian sebagian sisinya di hide dengan property overflow:hidden.
    <div class="area-segitiga">
        <div class="segitiga"></div>
    </div>
    

    Setting CSS-nya sebagai berikut:

    .area-segitiga {
       width: 150px;
       height: 150px;
       position: relative;
       overflow: hidden;
    }
    .segitiga {
       content: "";
       position: absolute;
       width: 75px;
       height: 75px;
       background: #999;
       transform: rotate(45deg);
       top: 115px;
       left: 25px;
    }
    

    Kalau anda hilangkan value dari overflow-nya menjadi visible atau anda hapus property tersebut maka akan terlihat bentuk aslinya. 🙂

Demikian cara membuat segitiga pada HTML-CSS. Salam…

Advertisements
Standard

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s