为什么五角星上/左方的定位不是从0开始？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-9编程练习-五星红旗</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
main{
width: 460px;
height: 310px;
background-color: red;
position: relative ;
margin: 0 auto;
}
div{
width: 0;
height: 0;
position: absolute;
border-bottom: 70px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
/* 以上是一个等腰三角形 */
transform: rotate(35deg);/* 顺时针旋转30度，整体缩小70% */
}
div::before{
width: 0;
height: 0;
position: absolute;
content: "";
border-bottom: 80px solid yellow;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);/* 逆时针旋转35度，并继承div的缩小属性 */
top: -45px;
left: -65px;
}
div::after{
width: 0;
height: 0;
position: absolute;
content: "";
border-bottom: 70px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform: rotate(-70deg);/* 逆时针旋转70度，并继承div的缩小属性 */
top: 3px;
left: -105px;
}
.div1{
top: 40px;
left: -30px;
transform: rotate(35deg) scale(0.4,0.4);
}
.div2{
top: -5px;
left: 50px;
transform: rotate(-15deg) scale(0.15,0.15);
}
.div3{
top: 25px;
left: 80px;
transform: rotate(0deg) scale(0.15,0.15);
}
.div4{
top: 69px;
left: 80px;
transform: rotate(35deg) scale(0.15,0.15);
}
.div5{
top: 100px;
left: 50px;
transform: rotate(55deg) scale(0.15,0.15);
}
</style>
</head>
<body>
<main>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</main>
</body>
</html>21
收起
正在回答
2回答
同学你好， 是指如下这种改法吗？
如果是这样的话，那么是因为给div以及它的伪元素before和after设置了transform属性中旋转和缩放影响了元素的显示位置，让同学误以为定位没有参考父元素的边框，实际上绝对定位元素一定是参考有定位属性（static除外）的先辈元素进行定位的。
示例： 可以将元素的tansform属性去除查看效果
效果图：可以看出是从父元素的左上角开始定位的
如果帮助到了你，欢迎采纳，祝学习愉快~
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星