老师看看这样的效果可以吗
来源：2-13 编程练习
听的说
2021-08-07 19:00:06
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
.box{
width:300px;
height:200px;
background:red;
position:relative;
perspective:300px;
}
.box div:nth-child(1){
position: absolute;
transform:scale(3) translate(13px ,13px);
}
.box div:nth-child(2){
transform: rotate(13deg) translate(85px,20px);
}
.box div:nth-child(3){
transform: rotate(15deg) translate(105px ,20px);
}
.box div:nth-child(4){
transform: translate(103px ,15px);
}
.box div:nth-child(5){
transform: rotate(13deg) translate(85px ,25px);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="box">
<div>⭐</div>
<div>⭐</div>
<div>⭐</div>
<div>⭐</div>
<div>⭐</div>
</div>
</body>
</html>
写回答
2回答
-
好帮手慕慕子
2021-08-08
同学你好， 对于你的问题解答如下：
1、可以去掉perspective属性，简化代码书写。
2、position属性也可以去掉，不过去掉之后需要调整适当box下的第一个div的translate值，让第一个五角星正常显示。示例：
3、本题要求通过border属性实现五角星样式，建议参考如下思路实现效果
（1）先看下三角的绘制思路，如下：
给一个元素设置宽高以及边框
当宽高不断减少时 , border会越趋向于三角形 , 如下：
当宽高为0时,border变成了三角 , 如下：
一个三角就是把其他角度的边框都设置为透明transparent，留一个角度的边框即可。
（2）五角星实现如下：
效果：
然后通过伪元素，再添加一个三角形：
效果：
然后通过旋转、偏移值等方式让它们重叠在一起：
效果：
添加伪元素，再添加一个三角形：
效果：
旋转并调整偏移值：
这样一个五角星就布局完成了：
旋转角度同学可以自己一点一点调整，让效果更美观。
祝学习愉快~
0 -
听的说
提问者
2021-08-07
我的主盒子和子盒子的position属性好像加多余了，还有perspective属性,还有哪里需要优化呢
0
相似问题