麻烦老师查看作业，谢谢。
来源：2-13 编程练习
DanielDu87
2021-12-28 18:26:52
作业提示里的伪元素我好像没用到，能给个思路吗
<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
* {
margin: 0;
padding: 0;
}
.b1 {
background-color: red;
height: 200px;
margin: 100px auto;
width: 300px;
position: relative;
color: yellow;
}
.b1 .d1 {
width: 40px;
height: 40px;
position: absolute;
top: 20px;
left: 25px;
font-size: 45px;
font-weight: bold;
text-align: center;
line-height: 40px;
}
.b1 div:nth-child(-n+5) {
position: absolute;
width: 40px;
height: 40px;
}
.b1 .d2 {
left: 80px;
top: -5px;
transform: rotate(-45deg);
}
.b1 .d3 {
left: 95px;
top: 18px;
transform: rotate(-30deg);
}
.b1 .d4 {
left: 95px;
top: 50px;
}
.b1 .d5 {
left: 70px;
top: 75px;
transform: rotate(30deg);
}
</style>
</head>
<body>
<div class="b1">
<div class="d1">★</div>
<div class="d2">★</div>
<div class="d3">★</div>
<div class="d4">★</div>
<div class="d5">★</div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕然然
2021-12-28
同学你好，通常五角星不会直接像同学所写的那样来实现，而是要使用元素来制作，这样才会用到伪元素。
建议同学可以参考如下代码，来实现五星红旗的效果：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>2-3</title> <style type="text/css"> /* 国旗背景 */ .vn-flag { width: 600px; height: 400px; background-color: rgb(218, 37, 29); position: relative; margin: 0 auto; } /* 绘制五角星: 一个五角星可以由三个三角形拼接而来， 这样就需要由三个元素来制作三个三角形， 此时::before和::after伪元素可以代替 两个真实元素来制作三角形，这样就不用 再另外定义两个真实元素，代码看起来也更清晰 */ /* 绘制第一个三角形 */ .vn-flag .stars { position: absolute; left: 90px; top: 120px; border: 30px solid transparent; border-top: 20px solid yellow; } /* 绘制第二个三角形，并调整位置 */ .vn-flag .stars::before { content: ""; position: absolute; left: -44px; top: -30px; border: 30px solid transparent; border-top: 20px solid yellow; transform: rotate(70deg); } /* 绘制第三个三角形，并调整位置，与其它两个三角形正好拼接成一个五角星 */ .vn-flag .stars::after { content: ""; position: absolute; left: -18px; top: -30px; border: 30px solid transparent; border-top: 20px solid yellow; transform: rotate(292deg); } /* 调整第一个五角星的位置和大小 */ .vn-flag .one{ transform: scale(1.8); } /* 调整第二个五角星的位置和大小 */ .vn-flag .two{ left: 180px; top: 30px; transform: rotate(25deg) scale(0.6); } /* 调整第三个五角星的位置和大小 */ .vn-flag .three{ left: 220px; top: 80px; transform: rotate(45deg) scale(0.6); } /* 调整第四个五角星的位置和大小 */ .vn-flag .four{ left: 220px; top: 130px; transform: rotate(65deg) scale(0.6); } /* 调整第五个五角星的位置和大小 */ .vn-flag .five{ left: 180px; top: 180px; transform: rotate(85deg) scale(0.6); } </style> </head> <body> <div class="vn-flag"> <!-- 大五角星 --> <div class="stars one"></div> <!-- 四个小五角星 --> <div class="stars two"></div> <div class="stars three"></div> <div class="stars four"></div> <div class="stars five"></div> </div> </body> </html>祝学习愉快！
0
相似问题