Cara Membuat Segitiga Dengan CSS3

Halo, ketemu lagi dengan saya apa kabarnya ? semoga baik yah, amin.

kali ini saya akan berbagi tutorial mengenaiÂ Cara Membuat Segitiga Dengan CSS3, Nah bagi kalian yang belum tau bagaimana cara membuatnya, alangkah baik nya untuk menyimak uraian berikut ini.

Langkah pertama silahkan buka teks editornya terlebih dahulu, kemudian ketikan kode HTML berikut.

	<p>Bagian 1</p>
	<div class="triangles">
		<div class="triangle demo-arrow-up"></div>
		<div class="triangle demo-arrow-down"></div>
		<div class="triangle demo-arrow-left"></div>
		<div class="triangle demo-arrow-right"></div>
	</div>
	
	<p>Bagian 2</p>
	<div class="triangles">
		<div class="triangle demo-topleft"></div>
		<div class="triangle demo-topright"></div>
		<div class="triangle demo-bottomleft"></div>
		<div class="triangle demo-bottomright"></div>
	</div>

Kalo sudah, lanjutkan untuk kode CSS3 berikut.

.triangles{
	overflow: hidden;
	padding: 20px;
	margin: 20px;
	border: 2px solid #000;
}
	.triangle{
		margin:10px;
		float: left;
	}
		
		/* Kelompok 1 */
		.demo-arrow-up{
			width: 0; 
			height: 0; 

			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			
			border-bottom: 50px solid #000;
		}

		.demo-arrow-down{
			width: 0; 
			height: 0; 
			
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			
			border-top: 50px solid #333;
		}

		.demo-arrow-right{
			width: 0; 
			height: 0; 
			
			border-top: 50px solid transparent;
			border-bottom: 50px solid transparent;
			
			border-left: 50px solid #ff0;
		}

		.demo-arrow-left{
			width: 0; 
			height: 0; 
			
			border-top: 50px solid transparent;
			border-bottom: 50px solid transparent; 
			
			border-right:50px solid #f0f; 
		}

		/* Kelompok 2 */

		.demo-topleft{
			width: 0; 
			height: 0; 
			
			border-top: 50px solid #333; 
			border-right: 50px solid transparent;
		}

		.demo-topright{
			width: 0; 
			height: 0; 
			
			border-top: 50px solid #333; 
			border-left: 50px solid transparent;
		}
		.demo-bottomleft{
			width: 0; 
			height: 0; 
			
			border-bottom: 50px solid #333; 
			border-right: 50px solid transparent;
		}
		.demo-bottomright{
			width: 0; 
			height: 0; 
			
			border-bottom: 50px solid #333; 
			border-left: 50px solid transparent;
		}

Kalo sudah jangan lupa disimpan, kemudian jalankan dibrowser, dan lihat hasilnya.

Oke, sekian dulu tutorial mengenaiÂ Cara Membuat Segitiga Dengan CSS3, semoga bermanfaat, amin.

Selamat mencoba.

DEMO

Kategori