为什么我在.two 上设置scale()缩放，会连他的：：before和：：after一起缩放了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-8编程练习五角星</title>
<style>
*{
margin: 0;
padding: 0;
}
.red{
width:600px;
height:400px;
background:red;
margin: 0 auto;
position:relative;
}
/* 给一个盒子宽高设置为0，然后设置边框。其他三个角度的边框为透明，只给一个角度的边框设置颜色，就实现了三角形 */
.one{
width: 0;
height: 0;
border-top: 30px solid yellow;
border-right: 49px solid transparent;
border-bottom:49px solid transparent;
border-left: 49px solid transparent;
position:absolute;
left:50px;
top:50px;
/* 当宽高为0时,border变成了三角 */
}
/* 在one前添加一个伪类元素 */
.one::before{
display:block;
content:"";
width:0;
height:0;
border-top: 30px solid yellow;
border-right: 49px solid transparent;
border-left: 49px solid transparent;
position:absolute;
transform: rotate(-146deg);
left:-50px;
top:-30px;
/* 当宽高为0时,border变成了三角 */
}
/* 在one后添加一个伪类元素 */
.one::after{
display:block;
content:"";
width:0;
height:0;
border-top: 30px solid yellow;
border-right: 49px solid transparent;
border-left: 49px solid transparent;
position:absolute;
transform: rotate(-70deg);
left:-50px;
top:-30px;
/* 当宽高为0时,border变成了三角 */
}
.two{
width: 0;
height: 0;
border-top: 30px solid yellow;
border-right: 49px solid transparent;
border-bottom:49px solid transparent;
border-left: 49px solid transparent;
position:absolute;
transform:scale(0.3);
left:200px;
top:10px;
/* 当宽高为0时,border变成了三角 */
}
/* 在one前添加一个伪类元素 */
.two::before{
display:block;
content:"";
width:0;
height:0;
border-top: 30px solid yellow;
border-right: 49px solid transparent;
border-left: 49px solid transparent;
position:absolute;
transform: rotate(-146deg);
left:-50px;
top:-30px;
/* 当宽高为0时,border变成了三角 */
}
/* 在one后添加一个伪类元素 */
.two::after{
display:block;
content:"";
width:0;
height:0;
border-top: 30px solid yellow;
border-right: 49px solid transparent;
border-left: 49px solid transparent;
position:absolute;
transform: rotate(-70deg);
left:-50px;
top:-30px;
/* 当宽高为0时,border变成了三角 */
}
</style>
</head>
<body>
<div class="red">
<div class="one"></div>
<br>
<div class="two"></div>
<br>
<div class="three"></div>
<br>
<div class="four"></div>
<br>
<div class="five"></div>
</div>
</body>
</html>
正在回答
同学你好，理解的是对的，可以通过检查元素查看(以谷歌为例，按F12)，如下：
祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星