css代码写出不同规则的图形

最新推荐文章于 2023-12-13 13:45:50 发布

原创最新推荐文章于 2023-12-13 13:45:50 发布 · 550 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用CSS代码绘制包括正方形、长方形、三角形在内的多种几何图形，并提供了实际的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页设计中遇到的各种形状的图形，我们可以用css代码写出各种规则不同的图形。直接上代码，复制去运行。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
span{ display:block; margin:10px 0 0 40px}
/* 1.正方形 */
#square {width: 50px;height: 50px;background: #9ED6FC;}
/* 2.长方形 */
#rectangle { width: 100px; height: 50px; background: #9ED6FC;}
/* 3.左上三角 */
#triangle-topleft { width: 0; height: 0; border-top: 50px solid #9ED6FC; border-right: 50px solid transparent;}
/* 4.右上三角 */
#triangle-topright { width: 0; height: 0; border-top: 50px solid #9ED6FC; border-left: 50px solid transparent;} 
/* 5.左下三角 */
#triangle-bottomleft { width: 0; height: 0; border-bottom: 50px solid #9ED6FC; border-right: 50px solid transparent; }
/* 6.右下三角 */
#triangle-bottomright { width: 0; height: 0; border-bottom: 50px solid #9ED6FC; border-left: 50px solid transparent; }
/* 7.平行四边形 */
#parallelogram {
	width:80px; height:50px; background:#9ED6FC;
	/* 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0  */
	-webkit-transform:skew(20deg);
	-moz-transform:skew(20deg);
	-o-transform:skew(20deg);
}

/* 8.梯形 */
#trapezoid {
	border-bottom:50px solid #9ED6FC;
	border-left:25px solid transparent;
	border-right:25px solid transparent;
	height:0; width:50px
}

/* 9.六角星 */
#star-six {
	width:0; height:0; position:relative;
	border-left:25px solid transparent;
	border-right:25px solid transparent;
	border-bottom:50px solid #9ED6FC;
}
#star-six:after {
	width:0; height:0; content:""; position:absolute; top:15px; left:-25px;
	border-left:25px solid transparent;
	border-right:25px solid transparent;
	border-top:50px solid #9ED6FC;
}

/* 10.五角星 */
#star-five {
	margin:50px 0; position:relative;
	display:block;	color:#9ED6FC;	width:0px;	height:0px;
	border-right:50px solid transparent;
	border-bottom:35px solid #9ED6FC;
	border-left:50px solid transparent;
	/* 指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义  */
	-moz-transform:rotate(35deg);
	-webkit-transform:rotate(35deg);
	-ms-transform:rotate(35deg);
	-o-transform:rotate(35deg)
}
#star-five:before {
	border-bottom:40px solid #9ED6FC;
	border-left:15px solid transparent;
	border-right:15px solid transparent;
	position:absolute;	height:0;	width:0;
	top:-26px;	left:-33px;	display:block;	content:'';
	-webkit-transform:rotate(-35deg);
	-moz-transform:rotate(-35deg);
	-ms-transform:rotate(-35deg);
	-o-transform:rotate(-35deg)
}
#star-five:after {
	position:absolute;	display:block;
	color:#9ED6FC;	top:1px;	left:-52px;
	width:0px;	height:0px;	content:'';
	border-right:50px solid transparent;
	border-bottom:35px solid #9ED6FC;
	border-left:50px solid transparent;
	-webkit-transform:rotate(-70deg);
	-moz-transform:rotate(-70deg);
	-ms-transform:rotate(- 70deg);
	-o-transform:rotate(-70deg);
}

/* 11.五边形 */
#pentagon {
	position:relative;
	width:54px;
	border-width:50px 18px 0;
	border-style:solid;
	border-color:#9ED6FC transparent
}

/* 12.六边形 */
#hexagon {
	width:50px;	height:25px;
	background:#9ED6FC;
	position:relative
}
#hexagon:before {
	content:"";	position:absolute;
	top:-12px;	left:0;	width:0;	height:0;
	border-left:25px solid transparent;
	border-right:25px solid transparent;
	border-bottom:12px solid #9ED6FC
}
#hexagon:after {
	content:"";	position:absolute;
	bottom:-12px;	left:0;	width:0;	height:0;
	border-left:25px solid transparent;
	border-right:25px solid transparent;
	border-top:12px solid #9ED6FC
}

</style>
</head>

<body>

       1.正方形:<span id="square"></span><br/>
       2.长方形:<span id="rectangle"></span><br/>
       3.左上三角:<span id="triangle-topleft"></span><br/>
       4.右上三角:<span id="triangle-topright"></span><br/>
       5.左下三角:<span id="triangle-bottomleft"></span><br/>
       6.右下三角:<span id="triangle-bottomright"></span><br/>
       7.平行四边形:<span id="parallelogram"></span><br/>
       8.梯形:<span id="trapezoid"></span><br/>
       9.六角星:<span id="star-six"></span><br/>
       10.五角星:<span id="star-five"></span><br/>
       11.五边形:<span id="pentagon"></span><br/>
       12.六边形:<span id="hexagon"></span><br/>
      
</html>