老师请看看有没有什么问题
来源:2-13 编程练习
槑大槑小
2020-12-22 14:52:16
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码,切记添加代码注释(请勿截图)
在这里输入代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 300px;
height: 200px;
background-color: red;
margin: 0 auto;
}
.box .xing {
width: 0;
height: 0;
border: 20px solid transparent;
border-top: 18px solid yellow;
position: relative;
top: 20px;
left: 10px;
}
.box .xing::after {
content: "";
width: 0;
height: 0;
border: 20px solid transparent;
border-left: 18px solid yellow;
position: absolute;
left: -9px;
top: -26px;
transform: rotate(20deg);
}
.box .xing::before {
content: "";
width: 0;
height: 0;
border: 20px solid transparent;
border-bottom: 18px solid yellow;
position: absolute;
left: -30px;
top: -24px;
transform: rotate(247deg);
}
.box .xing:nth-child(1) {
transform: scale(1.2) translate(10px, 25px);
}
.box .xing:nth-child(2) {
transform: scale(0.5) rotate(15deg) translate(75px, -125px);
;
}
.box .xing:nth-child(3) {
transform: scale(0.5) rotate(45deg) translate(5px, -190px);
}
.box .xing:nth-child(4) {
transform: scale(0.5) translate(145px, -140px);
}
.box .xing:nth-child(5) {
transform: scale(0.5) rotate(-45deg) translate(200px, -45px);
}
</style>
</head>
<body>
<div class="box">
<div class="xing"></div>
<div class="xing"></div>
<div class="xing"></div>
<div class="xing"></div>
<div class="xing"></div>
</div>
</body>
</html>
码,可通过选择【代码语言】突出显示
1回答
同学你好,代码布局是可以的,建议样式上再进行调整下,下面有一点凸出来
参考:
祝学习愉快!
相似问题