2-7五角星的那五个角怎么确定到36度？
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | <!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>2-3</title> <style type="text/css"> /* 此处写代码*/ .flag { width: 300px; height: 200px; background-color: red; position: relative; } .star { position: absolute; width: 0; height: 0; border-right: 30px solid transparent; border-top: 20px solid yellow; border-left: 30px solid transparent; } .star::before { content: ""; display: block; width: 0; height: 0; border-top: 30px solid transparent; border-right: 20px solid yellow; border-bottom: 30px solid transparent; transform: rotate(-16deg) translateY(-44px); } .star::after { content: ""; display: block; width: 0; height: 0; border-top: 30px solid transparent; border-left: 20px solid yellow; border-bottom: 30px solid transparent; transform: rotate(17deg) translate(-39px, -94px); } .big { left: 20px; top: 50px; } .small:nth-child(2) { left: 70px; top: 10px; transform:scale(0.35) rotate(-45deg); } .small:nth-child(3) { left: 90px; top: 35px; transform:scale(0.35) rotate(-30deg); } .small:nth-child(4) { left: 90px; top: 65px; transform:scale(0.35) rotate(-5deg); } .small:nth-child(5) { left: 70px; top: 85px; transform:scale(0.35) rotate(-45deg); } </style></head><body> <!-- 此处写代码 --> <div class="flag"> <div class="star big"></div> <div class="star small"></div> <div class="star small"></div> <div class="star small"></div> <div class="star small"></div> </div></body></html> |
五角星的那五个角怎么确定到36度，我画的border长度是随便给的，没有到36度，这个36度怎么使用border精确确定呢？
正在回答 回答被采纳积分+1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五角星</title>
<style>
#star-five {
margin: 50px;
position: relative;
display: block;
color: red;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
/*-moz-transform: rotate(35deg);*/
/*-webkit-transform: rotate(35deg);*/
/*-ms-transform: rotate(35deg);*/
/*-o-transform: rotate(35deg);*/
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
/*下面这条代码是必须的，表示在#star-five盒子之前插入一个非空的盒子*/
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: red;
top: 3px;
left: -105px;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}
</style>
</head>
<body>
<div id="star-five"></div>
</body>
</html>
我是这样写的，你看看
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧