css+html实现基本几何元素：多边形、圆、椭圆、直线
用canvas可以轻易地画出各种几何元素，贴图当然更简单。不过，用css也有用css的好处，比如说容易修改等。
效果如下：
（部分代码只考虑了webkit）
一、四边形
四边形当然最简单了，因为块状元素本来就是个四边形嘛。下面用<div>实现。
先设置一下背景色之类的东西：
.geom
{
background: blue;
margin: 50px;
float: left;
}
正方形：
div#square
{
width: 100px;
height: 100px;
}
长方形：
div#rectangle
{
width: 100px;
height: 50px;
}
平行四边形（用到了css3的transform中的skew）：
div#parallelogram
{
width: 100px;
height: 50px;
-webkit-transform: skew(20deg);
}菱形（用到了css3的transform中的scale和rotate）：
div#diamond
{
width: 100px;
height: 100px;
-webkit-transform: scale(0.5, 1) rotate(45deg);
}
梯形，这个比较难，利用的是border属性拐角处平分的性质：
div#trapezoid
{
height: 0;
width: 100px;
background-color: transparent;
border-bottom: 100px solid blue;
border-left: 50px solid transparent;
border-right: 20px solid transparent;
}
其实还有另一种方法，可能不如上一种好，就是利用css3的3d效果，远小近大，可以形成看上去的梯形，我在这里就不写了。
二、三角形
其实对之前的梯形稍作改动即可：
div#triangle
{
height: 0;
width: 0;
background-color: transparent;
border-bottom: 100px solid blue;
border-left: 30px solid transparent;
border-right: 70px solid transparent;
-webkit-transform: rotate(30deg);
}
三、任意多边形
稍有几何知识的人都知道任意多边形都可以分割成若干个三角形，所以我们有了三角形，也就有了任意多边形。
举个例子，正六边形：
#hexagon
{
background-color: transparent;
}
#hexagon div
{
position: absolute;
height: 0;
width: 0;
background-color: transparent;
border-bottom: 43px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
#hexagon div:nth-child(1)
{
-webkit-transform: translate(0, 21px);
}
#hexagon div:nth-child(2)
{
-webkit-transform: rotate(60deg) translate(0, 21px);
}
#hexagon div:nth-child(3)
{
-webkit-transform: rotate(120deg) translate(0, 21px);
}
#hexagon div:nth-child(4)
{
-webkit-transform: rotate(180deg) translate(0, 21px);
}
#hexagon div:nth-child(5)
{
-webkit-transform: rotate(240deg) translate(0, 21px);
}
#hexagon div:nth-child(6)
{
-webkit-transform: rotate(300deg) translate(0, 21px);
}
四、圆与椭圆
用到border-radius属性：
#circle
{
height: 100px;
width: 100px;
border-radius: 50px;
}
#ellipse
{
height: 100px;
width: 100px;
border-radius: 50px;
-webkit-transform: scale(1, 0.5);
}
五、直线
直接用<hr>标签即可
hr
{
width: 200px;
height: 3px;
}
hr:last-child
{
-webkit-transform: rotate(30deg);
}
六、完整代码
<html>
<head>
<style>
.geom
{
background: blue;
margin: 70px;
float: left;
}
div#square
{
width: 100px;
height: 100px;
}
div#rectangle
{
width: 100px;
height: 50px;
}
div#parallelogram
{
width: 100px;
height: 50px;
-webkit-transform: skew(20deg);
}
div#diamond
{
width: 100px;
height: 100px;
-webkit-transform: scale(0.5, 1) rotate(45deg);
}
div#trapezoid
{
height: 0;
width: 100px;
background-color: transparent;
border-bottom: 100px solid blue;
border-left: 50px solid transparent;
border-right: 20px solid transparent;
}
div#triangle
{
height: 0;
width: 0;
background-color: transparent;
border-bottom: 100px solid blue;
border-left: 30px solid transparent;
border-right: 70px solid transparent;
-webkit-transform: rotate(30deg);
}
#hexagon
{
background-color: transparent;
}
#hexagon div
{
position: absolute;
height: 0;
width: 0;
background-color: transparent;
border-bottom: 43px solid blue;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
#hexagon div:nth-child(1)
{
-webkit-transform: translate(0, 21px);
}
#hexagon div:nth-child(2)
{
-webkit-transform: rotate(60deg) translate(0, 21px);
}
#hexagon div:nth-child(3)
{
-webkit-transform: rotate(120deg) translate(0, 21px);
}
#hexagon div:nth-child(4)
{
-webkit-transform: rotate(180deg) translate(0, 21px);
}
#hexagon div:nth-child(5)
{
-webkit-transform: rotate(240deg) translate(0, 21px);
}
#hexagon div:nth-child(6)
{
-webkit-transform: rotate(300deg) translate(0, 21px);
}
#circle
{
height: 100px;
width: 100px;
border-radius: 50px;
}
#ellipse
{
height: 100px;
width: 100px;
border-radius: 50px;
-webkit-transform: scale(1, 0.5);
}
hr
{
width: 200px;
height: 3px;
}
hr:last-child
{
-webkit-transform: rotate(30deg);
}
</style>
</head>
<body>
<div id = "square" class = "geom"></div>
<div id = "rectangle" class = "geom"></div>
<div id = "parallelogram" class = "geom"></div>
<div id = "diamond" class = "geom"></div>
<div id = "trapezoid" class = "geom"></div>
<div style="clear:both"></div>
<div id = "triangle" class = "geom"></div>
<div id = "hexagon" class = "geom">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div id = "circle" class = "geom"></div>
<div id = "ellipse" class = "geom"></div>
<hr class = "geom"/>
<hr class = "geom"/>
</body>
</html>