2-7 五角星角度精准实现

首页课程实战体系课手记专栏慕课教程

2-7 五角星角度精准实现

来源：2-9 编程练习

BruinK

2018-06-01 17:50:47

首先这不是一个问题，这是一个关于五角星的画法的分享，

最后的顶角测量有两度的误差，不知道是测量误差还是画法误差；

如果各位有发现的问题，欢迎提出；

五角星分解：

整个五角星就是这个三角形绕自己高的百分之二十的地方旋转72°实现的；

可能旋转的中心点高低有所不同，可以自己调整，但是整体角度绝对正确，

顶角36°；宽高比2：3；

完整代码：

<!DOCTYPE HTML>
<html>

<head>
<meta charset="utf-8">
<title>五星红旗</title>
<style type="text/css">
.box {
height: 800px;
width: 800px;
position: relative;
margin: 50px auto;
border: 1px solid black;
}
.one {
margin: 30%;
width: 0px;
height: 0px;
position: absolute;
border-bottom: 300px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform-origin: 50% 80%;
}
.two {
margin: 30%;
width: 0px;
height: 0px;
position: absolute;
border-bottom: 300px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform-origin: 50% 80%;
transform: rotate(72deg);
}
.three {
margin: 30%;
width: 0px;
height: 0px;
position: absolute;
border-bottom: 300px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform-origin: 50% 80%;
transform: rotate(-72deg);
}
.four {
margin: 30%;
width: 0px;
height: 0px;
position: absolute;
border-bottom: 300px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform-origin: 50% 80%;
transform: rotate(144deg);
}
.five {
margin: 30%;
width: 0px;
height: 0px;
position: absolute;
border-bottom: 300px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform-origin: 50% 80%;
transform: rotate(-144deg);
}
</style>
</head>

<body>
<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
</div>
</body>

</html>

写回答

1回答