旋转没有效果

来源：2-13 编程练习

weixin_慕雪1363253

2020-10-31 17:13:16

老师，五星红旗的练习题，我写的before和after伪元素为什么没有旋转效果啊？

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
.father{
width:300px;
height:200px;
background:red;
position:relative;
}
.father div{
width:0;
height:0;
position:absolute;
border-style:solid;
}
.div1{
top:50px;
left:50px;
border-width:40px;
border-color:yellow transparent transparent transparent;
}
.div1::before{
content:'';
border-width:40px;
border-style:solid;
border-color:white transparent transparent transparent;
transform:rotate(-120deg);
}
.div1::after{
content:'';
border-width:40px;
border-style:solid;
border-color:blue transparent transparent transparent;
transform:rotate(120deg);
}
</style>
</head>
<body>

<div class='father'>
<div class='div1'></div>
<div class='div2'></div>
<div class='div3'></div>
<div class='div4'></div>
<div class='div5'></div>
</div>
</body>
</html>
在这里输入代码，可通过选择【代码语言】突出显示