TUTORIAL : Shapes

Kali ni Zati nak bagi tutorial tentang macam mana nak buat bentuk menggunakan coding. Ada beberapa contoh shapes beserta code dia dibawah ni. Harap dapat membantu.

1 - Square

<style type="text/css">
.square {
height: 50px;
width: 50px;
background-color: #C4D4E0;}
</style>

---

2 - Circle

<style type="text/css">
.circle {
  height: 50px;
  width: 50px;
  background-color: #9AABB9;
  border-radius: 50%;
}
</style>

---

3 - Oval

<style type="text/css">
.oval {
  height: 50px;
  width: 100px;
  background-color: #E2B49A;
  border-radius: 50%;
}
</style>

---

4 - Trapezoid

<style type="text/css">
.trapezoid {
border-bottom: 50px solid #E9C77B;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 125px;
}
</style>

---

5 - Rectangle

<style type="text/css">
.rectangle {
  height: 50px;
  width: 100px;
  background-color: #193446;
}
</style>

---

6 - Parallelogram

<style type="text/css">
.parallelogram {
width: 100px;
height: 50px;
transform: skew(20deg);
background: #4BBCF4;
}
</style>

---

7 - Triangle Up

<style type="text/css">
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #61C0BF;
}
</style>

---

8 - Triangle

<style type="text/css">
.triangle-down {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid #BBDED6;
}
</style>

---

9 - Triangle Left

<style type="text/css">
.triangle-left {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-right: 50px solid #FFB6B9;
border-bottom: 25px solid transparent;
}
</style>

---

10 - Triangle Right

<style type="text/css">
.triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-left: 50px solid #FAE3D9;
border-bottom: 25px solid transparent;
}
</style>