การสร้างรูปทรงเรขาคณิตด้วย CSS3

การนำ CSS3 เข้ามาใช้งานสำหรับผู้พัฒนาเว็บนั้น จะช่วยในเรื่องของการกินทรัพยากรของเว็บได้พอสมควร เพราะแทนที่จะใช้ไฟล์รูปภาพ แต่เมื่อนำเอาเทคนิค การสร้างรูปด้วย CSS3 ไปใช้แล้ว จะเห็นความแตกต่างได้อย่างชัดเจนในเรื่องของการประหยัดพื้นที่และการโหลดข้อมูล อีกทั้งยังสะดวกสำหรับงานที่ไม่จำเป็นต้องใช้ภาพ มาดูตัวอย่างของการสร้างรูปภาพด้วย CSS3 กันเลย

รูปวงกลม

CSS:
#circle {
width: 140px; /* ความกว้าง */
height: 140px; /* ความสูง */
background: red; /* สี */
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}

HTML :
<div id="circle"></div>

รูปสีเหลี่ยม

CSS:
#square {
width: 140px;
height: 140px;
background: blue;
}

HTML :
<div id="square "></div>

รูปวงรี

CSS:
#oval {
width: 200px;
height: 100px;
background: purple;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

HTML :
<div id="oval"></div>

รูปสามเหลี่ยม

CSS:
#up-triangle {
width: 0;
height: 0;
border-bottom: 120px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}

HTML :
<div id="up-triangle"></div>

รูปสี่เหลี่ยมผืนผ้า

CSS:
#rectangle {
width: 140px;
height: 80px;
background: green;
}

HTML :
<div id="rectangle"></div>

รูปสี่เหลี่ยมด้านขนาน

CSS:
#parallelogram {
width: 130px;
height: 75px;
background: pink;
/* Skew */
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}

HTML :
<div id="parallelogram"></div>
 
รูปดาว 6 แฉก

CSS:
#six-point-star {
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 80px solid red;
}
#six-point-star:after {
content:"";
position: absolute;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 80px solid red;
margin: 30px 0 0 -50px;
}

HTML :
<div id="six-point-star"></div>

รูปทรง 8 เหลี่ยม

CSS:
#octagon {
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white; 
border-right: 30px solid white;
margin: 70px 0 0 0;
}

HTML :
<div id="octagon"></div>

รูปทรงไข่

CSS:
#egg {
display:block;
width:126px;
/* width has to be 70% of height */
/* could use width:70%; in a square container */
height:180px;
background-color:green;
/* beware that Safari needs actual
px for border radius (bug) */
-webkit-border-radius:63px 63px 63px 63px/
108px 108px 72px 72px;
/* fails in Safari, but overwrites in Chrome */
border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}

HTML :
<div id="egg"></div>

รูปหัวใจ

CSS:
#heart {
position: relative;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 70px; top: 0;
width: 70px;
height: 115px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}

HTML :
<div id="heart"></div>