Css3之画五角星跟六角星

最新推荐文章于 2024-07-03 12:20:01 发布

小爱同学-Allen

最新推荐文章于 2024-07-03 12:20:01 发布

阅读量1.1k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/qq_34595425/article/details/99976779

版权

css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

今天我们就用css3来画五角星跟六角星，里面用到了css3的伪元素还有三角形组合起来的

五角星
分三部分，两个钝角三角形在下面叠加在一起，上面一个三角形
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>五角星和六角星</title>
	</head>
	<body>
		<div class="star"></div>
	</body>
	<style>
		.star{
			width:0px;
			height:0px;
			border-bottom: 70px solid red;
			border-left: 100px solid transparent;
			border-right: 100px solid transparent;
			margin: 100px auto;
			position: relative;
			transform: rotate(35deg);
			-webkit-transform: rotate(35deg);
			-moz-transform: rotate(35deg);
			-o-transform: rotate(35deg);
		}
		.star::before{
			content: "";
			width:0px;
			height:0px;
			border-bottom: 70px solid red;
			border-left: 30px solid transparent;
			border-right: 30px solid transparent;
			position: absolute;
			top: -40px;
			left:-60px;
			transform: rotate(-35deg);
			-webkit-transform: rotate(-35deg);
			-moz-transform: rotate(-35deg);
			-o-transform: rotate(-35deg);
		}
		.star::after{
			content: "";
			width:0px;
			height:0px;
			border-bottom: 70px solid red;
			border-left: 100px solid transparent;
			border-right: 100px solid transparent;
			position: absolute;
			top: 0px;
			left:-100px;
			transform: rotate(-70deg);
			-webkit-transform: rotate(-70deg);
			-moz-transform: rotate(-70deg);
			-o-transform: rotate(-70deg);
		}
	</style>
</html>

六角星
通过两个三角形叠加在一起然后实现
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>五角星和六角星</title>
	</head>
	<body>
		<div class="star"></div>
	</body>
	<style>
		.star{
			width:0px;
			height:0px;
			border-bottom: 100px solid red;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			margin: 100px auto;
			position: relative;
		}
		.star::before{
			content: "";
			width:0px;
			height:0px;
			border-bottom: 100px solid red;
			border-left: 50px solid transparent;
			border-right: 50px solid transparent;
			position: absolute;
			top: 30px;
			left:-50px;
			transform: rotate(-180deg);
			-webkit-transform: rotate(-180deg);
			-moz-transform: rotate(-180deg);
			-o-transform: rotate(-180deg);
		}
	</style>
</html>