2-13 作业，请老师帮忙检查一下
来源：2-13 编程练习
呜蜩的呀
2022-07-29 19:28:25
问题描述：
有一个问题，就是关于利用widthheheight为0的div创建三角形，那么关于三角形有什么特殊的角度设置吗？
及比如平时直接设置形成的等边直角三角形，这种的比例快速设置？
我一开始是想用scaleY对三角形直接变形让它变形，但是发现旋转的时候视觉效果会不一样？
同时关于代码有哪里不完善吗，又可以改进的地方，请老师帮忙批改一下，谢谢！
相关代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
* {
margin: 0px;
padding: 0px;
}
section {
width: 1200px;
height: 900px;
background: whitesmoke no-repeat center;
border: 1px solid #000;
}
/* 给矩形设置红色的背景，长宽比例是3：2，背景红色，居中，比例设置，利用缩放变形 */
.redbg {
margin: 60px auto;
width: 600px;
height: 400px;
background: red center;
position: relative;
}
/* 利用三个三角形来拼成五角星，三角形利用面积为0的div盒子边框实现 */
.bigstar {
background-color: antiquewhite;
position: absolute;
top: 65px;
left: 75px;
transform: rotate(0deg);
}
/* 旋转三角形到一定的角度，三个三角形拼接成五角星 */
.bigstar .star1 {
border: 50px solid transparent;
border-top:35px solid yellow;
position: absolute;
top: 21px;
left: 20px;
transform: rotate(0deg);
}
.bigstar .star2 {
border: 50px solid transparent;
border-top: 35px solid yellow;
position: absolute;
top: -28px;
left: 30px;
transform: rotate(215deg);
}
.bigstar .star3 {
border: 50px solid transparent;
border-top: 35px solid yellow;
position: absolute;
top: 3px;
left: 40px;
transform: rotate(288deg);
}
/* 创建大五角星一样的操作 */
.smallstar {
background-color: antiquewhite;
position: absolute;
}
.smallstar .star1 {
border: 50px solid transparent;
border-top:35px solid yellow;
position: absolute;
top: 21px;
left: 20px;
transform: rotate(0deg);
}
.smallstar .star2 {
border: 50px solid transparent;
border-top: 35px solid yellow;
position: absolute;
top: -28px;
left: 30px;
transform: rotate(215deg);
}
.smallstar .star3 {
border: 50px solid transparent;
border-top: 35px solid yellow;
position: absolute;
top: 3px;
left: 40px;
transform: rotate(288deg);
}
/* 对小五角星进行位置移动 */
/* nth-child:用于匹配父元素的第n个子元素，无论是什么元素
即：ul>li>h3, p 此时选择p:firdt-child或者nth-child(1)都不会选中p 因为p的父元素li的第一个子元素不是p是h3 */
.redbg .smallstar:nth-child(2) {
top: 5px;
left: 240px;
transform: scale(0.4) rotate(90deg);
}
.redbg .smallstar:nth-child(3) {
top: 55px;
left: 292px;
transform: scale(0.4) rotate(125deg);
}
.redbg .smallstar:nth-child(4) {
top:100px;
left: 266px;
transform: scale(0.4) rotate(72deg);
}
.redbg .smallstar:nth-child(5) {
top: 145px;
left: 240px;
transform: scale(0.4) rotate(90deg);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<section>
<div class="redbg">
<div class="bigstar">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
</div>
<div class="smallstar">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
</div>
<div class="smallstar">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
</div>
<div class="smallstar">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
</div>
<div class="smallstar">
<div class="star1"></div>
<div class="star2"></div>
<div class="star3"></div>
</div>
</div>
</section>
</body>
</html>写回答
1回答
-
好帮手慕小李
2022-07-30
同学你好，首先代码可以实现效果很棒，另使用宽度高度为0的div设置三角形没有什么特殊的角度设置，但方向可以通过border透明度实现如下：
效果如下：
关于等边三角形设置我们使用上面老师用的方式就可以实现，首先要保证正方形边长相同，这样就可以实现了。
同学所说的使用scaleY这个属性是垂直方向的缩放，那么相当于竖向拉伸，这样同学在做旋转效果就会不一样。
同学可以尝试在.bigstar类名上添加transform: scaleY(3.5);属性看看它的效果。
祝学习愉快！
0
相似问题