老师请检查
来源：2-13 编程练习
练习时常两年半的前端练习生
2022-03-28 18:28:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.content{
position: relative;
width: 800px;
height: 500px;
background-color: red;
margin: 50px auto;
}
.content .big-wjx{
position: absolute;
top: 90px;
left: 90px;
transform: scale(7);
}
.content .wjx1{
position: absolute;
top: 20px;
left: 190px;
transform: scale(2) rotate(45deg);
}
.content .wjx2{
position: absolute;
top: 60px;
left: 220px;
transform: scale(2) rotate(45deg);
}
.content .wjx3{
position: absolute;
top: 113px;
left: 220px;
transform: scale(2) rotate(45deg);
}
.content .wjx4{
position: absolute;
top: 161px;
left: 190px;
transform: scale(2) rotate(45deg);
}
</style>
</head>
<body>
<div class="content">
<div class="big-wjx">⭐️</div>
<div class="wjx1">⭐️</div>
<div class="wjx2">⭐️</div>
<div class="wjx3">⭐️</div>
<div class="wjx4">⭐️</div>
</div>
</body>
</html>
1回答
-
好帮手慕慕子
2022-03-28
同学你好，思路是可以的，不过可能粘贴格式的问题，测试的五角星样式不对的，如下：
建议：使用css实现五角星，可以参考如下思路
首先创建一个矩形div作为国旗背景，然后再创建五个div作为五个五角星，html代码结构如下：
然后绘制国旗背景样式，css代码如下
再然后开始绘制五角星：五个五角星的绘制方式都是一样的，所以可以统一绘制，最后只需要调整每个五角星的大小和位置即可。五角星绘制思路如下：
可以将三个三角形拼接得到一个五角星，因为html中一个五角星只定义了一个div元素，一个div元素只绘制一个三角形，所以剩余两个三角形可以通过::before和::after伪元素实现，代码如下
最后，调整每个五角星的位置和大小，如图
祝学习愉快！
0
相似问题