Membuat bentuk segitiga dengan CSS

Dengan teknik border, kita dapat membuat bentuk segitiga dengan mudah.

Markup HTML

<div class="segitiga"></div>

CSS

.segitiga{
	width:0;
	height:0;
	border-style:solid;
	border-width:100px;
	border-color:red green blue yellow;
}
triangle box

Itu adalah bentuk dari border ketika elemen berukuran 0x0. Urutan warna border itu searah jarum jam (top, right, bottom, dan left). Jadi jika kita ingin membuat segitiga menghadap ke kiri, beri warna pada border-right dan sisanya beri nilai transparent.

.segitiga{
	width:0;
	height:0;
	border-style:solid;
	border-width:100px;
	border-color:transparent green transparent transparent;
}
triangle
Category Tips & TricksTag , ,

3 Komentar untuk “Membuat bentuk segitiga dengan CSS

Tinggalkan Komentar Anda

This site uses Akismet to reduce spam. Learn how your comment data is processed.