麻烦老师检查下代码，另外给我解释一下代码，代码是借鉴别人的，似懂非懂，谢谢
来源：2-13 编程练习
叫我丽红
2021-04-22 16:42:28
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
*{
margin:o;
padding:0;
}
.box{
width:300px;
height:200px;
border:1px solid white;
background-color:red;
margin:100px auto;
perspective: 300px;
position: relative;
}
.box .big{
width:40px;
height:60px;
transform:translateX(20px) translateY(6px);
}
.box .big::before{
content:'★';
color:yellow;
font-size:60px;
}
.box .x1{
width:20px;
height:20px;
transform:translateX(80px) translateY(-60px);
}
.box .x1::before{
content:'★';
color:yellow;
font-size:30px;
}
.box .x2{
width:20px;
height:20px;
transform:translateX(110px) translateY(-50px);
}
.box .x2::before{
content:'★';
color:yellow;
font-size:30px;
}
.box .x3{
width:20px;
height:20px;
transform:translateX(100px) translateY(-30px);
}
.box .x3::before{
content:'★';
color:yellow;
font-size:30px;
}
.box .x4{
width:20px;
height:20px;
transform:translateX(60px) translateY(-30px);
}
.box .x4::before{
content:'★';
color:yellow;
font-size:30px;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="box">
<div class="big"></div>
<div class="x1"></div>
<div class="x2"></div>
<div class="x3"></div>
<div class="x4"></div>
</div>
</body>
</html>
1回答
-
好帮手慕星星
2021-04-22
同学你好，代码实现效果可以。
针对提问回复：
代码中每个div通过transform控制元素位置，而伪类用来设置五角星，从而显示出来
看一个五角星布局以及样式会简单一些哦。
另外习题本意不是用五角星字符，而是自己来实现一个五角星。可以考虑三个三角形拼接，结构如下
三角形可以通过边框来实现，例如：
一个边设置颜色，其他边颜色设置透明
然后结合transform以及定位来实现五角星，自己试着写一写。
祝学习愉快！
0
相似问题