after设置absolute后水平垂直偏移未设,相对于relative元素的偏移?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
.bg{
width: 500px;
height: 500px;
margin: 200px auto;
}
.bg>div{
width: 0;
height: 0;
border-bottom: 70px solid yellow;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform: rotate(35deg);
position: relative;
}
.bg>div:before{
content:'';
width: 0;
height: 0;
border-bottom: 80px solid yellow;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
display: block;
position: absolute;
top: -45px;left: -65px;
}
.bg>div:after{
content:'';
width: 0;
height: 0;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 70px solid yellow;
position: absolute;
display: block;
left: -105px;top:3px;
transform: rotate(-70deg);
}
</style>
</head>
<body>
<div class="bg">
<div>
</div>
</div>
</body>
</html>
这里的after和before设定absolute后,未旋转角度时是否旋转角度同relative的已旋转的角度相同
正在回答
可以把伪类中设置的循转去掉看看,下图是div元素(设置了循转):
下图是:before(没有设置旋转,并且定位top和left值为0):
可以看到伪类元素是在top和left为0的位置上(相对于div的中心点),只不过有div的循转而已。
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础,既想进阶,又想进军移动端开发,那就来吧,我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等,让你在前端道路上畅通无阻!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星