How To

Cara Membuat Berbagai Bentuk Bidang Pada Sebuah Website

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

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>

Hanifah Nurbaeti

Share
Tags: CSSHow To