01 January 2019

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>

No comments:

Post a Comment