tutweb/css-segitiga.html

## css-segitiga.html
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat bentuk segitiga dengan css</title>

	<style>
	/* Triangles
	----------------------------*/
	.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;
			}
	</style>

</head>
<body>
	<div class="container">

		<p>Kelompok 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>Kelompok 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>

	</div>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Membuat bentuk segitiga dengan css</title>

	<style>
	/* Triangles
	----------------------------*/
	.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;
	}
	</style>

	</head>
	<body>
	<div class="container">

	<p>Kelompok 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>Kelompok 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>

	</div>
	</body>
	</html>