做出来的形似，请问要怎么改善？
来源：2-13 编程练习
慕用3070704
2020-10-08 17:14:14
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{
margin:0;
padding:0;}
.box {
width:300px;
height:200px;
background-color:red;
margin:20px auto;
position:relative;
}
.box .star {
position:absolute;
color: rgb(255, 187, 0);
}
.box .star.big {
transform:scale(3,3) translate(10px,10px) ;
}
.box .star.small1 {
transform:rotate(15deg) translate(73px,-22px) scale(1.5,1.5);
}
.box .star.small2 {
transform:rotate(-15deg) translate(85px,47px) scale(1.5,1.5);
}
.box .star.small3 {
transform: translate(95px,56px) scale(1.5,1.5);
}
.box .star.small4 {
transform:rotate(-15deg) translate(48px,96px) scale(1.5,1.5);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="box">
<div class="star big">★</div>
<div class="star small1">★</div>
<div class="star small2">★</div>
<div class="star small3">★</div>
<div class="star small4">★</div>
</div>
</body>
</html>
1回答
-
同学你好，经过测试，页面中的五角星是通过符号直接写出来的，而不是通过css代码的形式实现的，同学可以参考老师的建议来对自己的代码进行修改，建议如下：
实现三角形，主要使用伪类、定位、旋转、放大缩小等属性。这里给同学讲一下五角星的形成。
（1）五角星主要是由几个三角形拼接而成，首先，先通绘制出一个三角形。一个三角形就是把其他角度的边框都设置为transparent，留一个角度的边框颜色即可。
效果：
（2）通过伪类元素，再添加一个三角形，然后通过旋转属性，定位属性等方式让它们重叠在一起。
效果：
（3）再次添加伪元素添加一个三角形。
效果如图：
其它的小三角也是按照这种格式来进行书写的，再通过缩放、旋转、定位等属性来对它进行位置的改变。
如果帮助到了你，欢迎采纳，祝学习愉快！
2
相似问题