纯CSS画几何图形
浏览数：139 /
时间：2015年06月09日
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>纯CSS画几何图形</title>
</head>
<body>
<!--多彩空心矩形-->
<div style="width:100px; height:100px; border-width:20px; border-style:solid; border-color:red green blue gray;"></div><br/>
<!--多彩矩形-->
<div style="width:0px; height:0px; border-width:40px; border-style:solid; border-color:red green blue gray;"></div><br/>
<!--圆-->
<div style="width:100px; height:100px; background:green; border-radius:100px;"></div><br/>
<!--矩形-->
<div style="width:100px; height:80px; background:green;"></div><br/>
<!--等腰三角形-->
<div style="width:0px; height:0px; border-bottom:50px solid green; border-left:50px solid transparent;border-right:50px solid transparent;"></div><br/>
<!--左上三角-->
<div style="width:0px; height:0px; border-top:100px solid green; border-right:100px solid transparent;"></div><br/>
<!--等腰梯形-->
<div style="width:100px; height:0px; border-bottom:100px solid green; border-left:50px solid transparent; border-right:50px solid transparent;"></div><br/>
<!--六边形-->
<div>
<div style="width:0px; height:0px; border-bottom:30px solid green; border-left:52px solid transparent; border-right:52px solid transparent;"></div>
<div style="width:106px; height:60px; background:green;"></div>
<div style="width:0px; height:0px; border-top:30px solid green; border-left:52px solid transparent; border-right:52px solid transparent;"></div>
</div>
<!--画横线-->
<hr style="background:red; width:280px; height:6px;"/>
<!--画竖线-->
<div style="width:0px; height:60px; border-left:8px solid red;"></div><br/>
</body>
</html>
结果如图： 
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
