請使用支持CSS3的浏覽器。
效果預覽：http:///keleyi/phtml/html5/8.htm
完整代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3畫出各種圖形--</title>
<style>
.Square { width:100px; height:100px; background:#669; }
.trapezoid_keleyi_com { border-bottom: 100px solid #669; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }
.parallelogram { width: 150px; height: 100px; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); background: #669;margin-left:20px; }
.triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #669; }
.circle { width: 100px; height: 100px; background: #669; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }
.circle-circle { width: 100px; height: 100px; border:20px solid #669;background: #fff; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }
.circle-up { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669;border-right:100px solid #669; -moz-border-radius: 100px 100px 0 0; -webkit-border-radius: 100px 100px 0 0; border-radius: 100px 100px 0 0; }
.circle-lefttop { width: 100px; height: 0px;border:0 solid transparent;border-top:100px solid #669; -moz-border-radius:0 100px 100px 0; -webkit-border-radius:0 100px 100px 0; border-radius:100px 0 0 0; }
.tail-lefttop{border: 0 solid transparent; border-top:30px solid #669;-moz-border-radius:100px 0 0 0;-webkit-border-radius:100px 0 0 0;border-radius:100px 0 0 0;width:100px;height:100px;}
.pop{width:200px;height:100px;-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;background:#669;margin-top:20px;position:relative}
.pop:after{content: "";border: 0 solid transparent; border-bottom:30px solid #669;-moz-border-radius:0 0 0 200px;-webkit-border-radius:0 0 0 200px;
border-radius:0 0 0 200px;width:50px;height:50px;position:relative;margin-top:20px;-webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg); -o-transform: rotate(-90deg);position:absolute;top:50px;}
.heart_keleyi_com{width:160px;height:200px;position:relative}
.heart_keleyi_com:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);
position:absolute;left:20px;}
.heart_keleyi_com:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);
position:absolute;left:48px;top:0px;}
</style>
</head>
<body>
<a href="http:///a/bjac/rx4nb651.htm" target="_blank">原文</a>
<div>
<dd class="Square"></dd><br/>
<dd class="trapezoid_keleyi_com"></dd><br/>
<dd class="parallelogram"></dd><br/>
<dd class="triangle-up"></dd><br/>
<dd class="circle"></dd><br/>
<dd class="circle-circle"></dd><br/>
<dd class="circle-up"></dd><br/>
<dd class="circle-lefttop"></dd><br/>
<dd class="tail-lefttop"></dd><br/>
<dd class="pop"></dd><br/><br/>
<dd class="heart_keleyi_com"></dd><br/>
</div>
<div style="border-left:50px solid #060;border-right:50px solid #600;border-bottom:50px solid #f00;border-top:50px solid #00f;width:0px;height:0px;"></div>
</body>
</html>