老师帮忙检查一下
来源：2-13 编程练习
摩苏尔
2020-10-31 21:55:41
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代码，可通过选择【代码语言】突出显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五星红旗</title>
<style type="text/css">
*{
margin: 0;
padding: 0px;
}
.bg{
width: 200px;
height: 200px;
background-color: red;
margin: 150px auto;
transform: scale(3,2);
position: relative;
}
.bg .big{
position: absolute;
transform: scale(3) translateX(10px) translateY(15px);
}
.bg .x1{
position: absolute;
transform: translateX(65PX) translateY(8PX) rotate(-45deg);
}
.bg .x2{
position: absolute;
transform: translateX(80PX) translateY(40PX) rotate(-25deg);
}
.bg .x3{
position: absolute;
transform: translateX(80PX) translateY(72PX) rotate(0deg);
}
.bg .x4{
position: absolute;
transform: translateX(65PX) translateY(100PX) rotate(25deg);
}
</style>
</head>
<body>
<div class="bg">
<div class="big">⭐</div>
<div class="x1">⭐</div>
<div class="x2">⭐</div>
<div class="x3">⭐</div>
<div class="x4">⭐</div>
</div>
</body>
</html>
1回答
-
同学你好，五角星定位效果可以。但是练习中是要求用代码来实现五角星的，而不是用已经好的图形。参考布局：
（1）五角星主要是由几个三角形拼接而成，首先，先通绘制出一个三角形。一个三角形就是把其他角度的边框都设置为transparent，留一个角度的边框颜色即可
效果：
（2）通过伪类元素，再添加一个三角形，然后通过旋转属性，定位属性等方式让它们重叠在一起
效果：
（3）再次添加伪元素添加一个三角形
效果：
其它的小三角也是按照这种格式来进行书写的，再通过缩放、旋转、定位等属性来对它进行位置的改变。
自己试着写一写，祝学习愉快！
0
相似问题