css+html实现基本几何元素：多边形、圆、椭圆、直线

最新推荐文章于 2024-05-30 19:13:58 发布

jupeizhong

最新推荐文章于 2024-05-30 19:13:58 发布

阅读量7.7k

点赞数 1

分类专栏： web 文章标签： css css3 html

本文链接：https://blog.csdn.net/jupeizhong/article/details/38905057

版权

web 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

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