Cara Membuat Segititga Menggunakan CSS before after


Selamat malam teman-teman, kali ini saya mau share bagaimanasih cara membuat segitiga menggunakan CSS. Nah Berikut ini adalah Cara Membuat Segititga Menggunakan CSS before after.

Top

 

 

div:before {
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 200px 100px;
border-color: transparent transparent #000000 transparent;
}

Top Right

div:before {
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #000000 transparent transparent;
}

Top Left

div:before {
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #000000 transparent transparent transparent;
}

Right

div:before {
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 100px 0 100px 200px;
border-color: transparent transparent transparent #000000;
}

Left

div:before {
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 100px 200px 100px 0;
border-color: transparent #000000 transparent transparent;
}

Bottom

div:before {
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 200px 100px 0 100px;
border-color: #000000 transparent transparent transparent;
}

Bottom Left

div:before {
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent #000000;
}

Bottom Right

div:before {
content:'';
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #000000 transparent;
}

Nah itu dia caranya, semoga bermanfaat ya teman-teman.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s