老师，五角星写出来了，却写不出小的五角星
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{margin:0; padding:0;}
.container{width:600px; height:400px;
background-color:red;
margin:30px auto;
position:relative;
}
.star{ width:0; height:0;
border-top:25px solid yellow;
border-left:35px solid transparent ;
border-right:35px solid transparent;
position:absolute;
top:100px;
left:100px;
}
.star::after{display:block;
width:0; height:0;
content:"";
border-top:25px solid yellow;
border-left:35px solid transparent;
border-right:35px solid transparent;
position:absolute;
transform:rotate(-142deg);
top:-25px;
left:-35px;
}
.star::before{display:block;
width:0; height:0;
content:"";
border-top:25px solid yellow;
border-left:35px solid transparent;
border-right:35px solid transparent;
position:absolute;
top:-25px;
left:-35px;
transform:rotate(-75deg);
}
.star2{ transform:scale(0.3) rotate(15deg);
translate(135px,-35px);}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="container">
<div class="star1 star"></div>
<div class="star2 star"></div>
<div class="star3 star"></div>
<div class="star4 star"></div>
<div class="star5 star"></div>
</div>
正在回答
同学你好，translate是transform的属性值之一，所以要写成如下形式才会生效：
同学可以试一下。
祝学习愉快!
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星