用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>