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

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

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

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

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

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

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

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

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

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

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

<div id="parallelogram"></div>

#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;
}

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

#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;
}

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

#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%;
}

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

#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%;
}

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

หากต้องการทราบการอัพเดทของ css สร้างรูปทรงเรขาคณิตง่ายๆ ด้วย CSS3 และเรื่องที่เกี่ยวข้อง แนะนำให้กด ที่ facebook ด้านล่างนี้เลยค่ะ เผื่อที่จะได้อัพเดทก่อนใคร

อัพเดทเมื่อ วันศุกร์ที่ 9 พฤษภาคม พ.ศ. 2557 ในหมวดหมู่ของ css เรื่อง css สร้างรูปทรงเรขาคณิตง่ายๆ ด้วย CSS3