老师帮忙检查一下，谢谢！
来源：2-13 编程练习
慕容5288970
2021-03-10 18:55:05
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 600px;
height: 400px;
background-color: red;
perspective: 300px;
}
.box .wjx {
color: yellow;
}
.box1{
transform: scale(2) rotate(-45deg) translate(224px,-55px);
}
.box2{
transform: scale(2) rotate(45deg) translate(252px,58px);
}
.box3{
transform: scale(2) translate(225px,22px);
}
.box4{
transform: scale(2) rotate(-45deg) translate(212px,-40px);
}
.box5{
transform: scale(6) translate(255px,-3px);
}
</style>
</head>
<body>
<div class="box">
<div class="wjx">
<div class="box1">★</div>
<div class="box2">★</div>
<div class="box3">★</div>
<div class="box4">★</div>
<div class="box5">★</div>
</div>
</div>
</body>
</html>
1回答
-
同学你好，效果实现是对的。同学代码中实现五角星的方式是可以的，老师给同学提供另一种实现的参考思路：
做出三个三角图形然后通过旋转角度最后通过定位把它们组合在一起，
三角形的实现思路如下：
当一个盒子宽高为0，只设置边框的时候，会发现边框是由四个小三角组成。
所以给其他角度的三角设置透明（transparent），然后只留一个即可实现一个三角形。参考如下小例子：
下方有个五角星的小例子，同学可以参考下：
效果：
最后将所有三角形的颜色换成统一的黄色就可以了
祝学习愉快~
2
相似问题