Cara Membuat Berbagai Bentuk Bidang Pada Sebuah Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

Di bawah ini kita akan mempelajari cara membuat berbagai bentuk dengan CSS.

Section Artikel

1 Bentuk Kotak
2 Bentuk Lingkaran
3 Bentuk Lonjong
4 Bentuk Trapesium
5 Bentuk Persegi Panjang
6 Bentuk Jajarangenjang
7 Bentuk Segitiga Ke Atas
8 Bentuk Segitiga Ke Bawah
9 Bentuk Segitiga Ke Kiri
10 Bentuk Segitiga Ke Kanan

Bentuk Kotak

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.square {
  height: 50px;
  width: 50px;
  background-color: blue;
}
</style>
</head>
<body>

<h2>Bentuk Kotak CSS</h2>
<div class="square"></div>

</body>
</html>

Bentuk Lingkaran

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.circle {
  height: 50px;
  width: 50px;
  background-color: red;
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Bentuk Lingkaran CSS</h2>
<div class="circle"></div>

</body>
</html>

Bentuk Lonjong

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.oval {
  height: 50px;
  width: 100px;
  background-color: #A52A2A;
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Bentuk Lonjong CSS</h2>
<div class="oval"></div>

</body>
</html>

Bentuk Trapesium

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.trapezoid {
	border-bottom: 50px solid #6495ED;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 125px;
}
</style>
</head>
<body>

<h2>Bentuk Trapesium CSS</h2>
<div class="trapezoid "></div>

</body>
</html>

Bentuk Persegi Panjang

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.rectangle {
  height: 50px;
  width: 100px;
  background-color: #006400;
}
</style>
</head>
<body>

<h2>Bentuk Persegi Panjang CSS</h2>
<div class="rectangle"></div>

</body>
</html>

Bentuk Jajarangenjang

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallelogram {
	width: 100px;
	height: 50px;
	transform: skew(20deg);
	background: #FF00FF;
}
</style>
</head>
<body>

<h2>Bentuk Jajarangenjang CSS</h2>
<div class="parallelogram"></div>

</body>
</html>

Bentuk Segitiga Ke Atas

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #ADFF2F;
}
</style>
</head>
<body>

<h2>Bentuk Segitiga Ke Atas CSS</h2>
<div class="triangle-up"></div>

</body>
</html>

Bentuk Segitiga Ke Bawah

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-down {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid #20B2AA;
}
</style>
</head>
<body>

<h2>Bentuk Segitiga Ke Bawah CSS</h2>
<div class="triangle-down"></div>

</body>
</html>

Bentuk Segitiga Ke Kiri

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-left {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid #800000;
	border-bottom: 25px solid transparent;
}
</style>
</head>
<body>

<h2>Bentuk Segitiga Ke Kiri CSS</h2>
<div class="triangle-left"></div>

</body>
</html>

Bentuk Segitiga Ke Kanan

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.triangle-right {
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid #FFA500;
	border-bottom: 25px solid transparent;
}
</style>
</head>
<body>

<h2>Bentuk Segitiga Ke Kanan CSS</h2>
<div class="triangle-right"></div>

</body>
</html>