老师想请问下这题有没有标准答案想照着理解谢谢

慕仙0240544 2022-07-03

源自：2D与3D转换 2-13 编程练习

收起

1回答

imooc_慕慕 2022-07-03 09:50:32

同学你好，这种编程题没有标准答案，实现效果即可，根据题目要求，我们可以这样去理解：参考思路如下：

绘制五角星:

一个五角星可以由三个三角形拼接而来，这样就需要由三个元素来制作三个三角形，此时::before和::after伪元素可以代替两个真实元素来制作三角形，代码看起来更清晰；然后给所有的五角星调整位置和大小；

参考代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>2-3</title>
		<style type="text/css">
			/* 国旗背景 */
			.vn-flag {
				width: 600px;
				height: 400px;
				background-color: rgb(218, 37, 29);
				position: relative;
				margin: 0 auto;
			}
		   /* 绘制第一个三角形 */
			.vn-flag .stars {
				position: absolute;
				left: 90px;
				top: 120px;
				border: 30px solid transparent;
				border-top: 20px solid yellow;
				
			}
			/* 绘制第二个三角形，并调整位置 */
			.vn-flag .stars::before {
				content: "";
				position: absolute;
				left: -44px;
				top: -30px;
				border: 30px solid transparent;
				border-top: 20px solid yellow;
				transform: rotate(70deg);
			}
			/* 绘制第三个三角形，并调整位置，与其它两个三角形正好拼接成一个五角星 */
			.vn-flag .stars::after {
				content: "";
				position: absolute;
				left: -18px;
				top: -30px;
				border: 30px solid transparent;
				border-top: 20px solid yellow;
				transform: rotate(292deg);
			}
			
			/* 调整第一个五角星的位置和大小 */
			.vn-flag .one{
				transform: scale(1.8);
			}
			
			/* 调整第二个五角星的位置和大小 */
			.vn-flag .two{
				left: 180px;
				top: 30px;
				transform: rotate(25deg) scale(0.6);
			}
			/* 调整第三个五角星的位置和大小 */
			.vn-flag .three{
				left: 220px;
				top: 80px;
				transform: rotate(45deg) scale(0.6);
			}
			/* 调整第四个五角星的位置和大小 */
			.vn-flag .four{
				left: 220px;
				top: 130px;
				transform: rotate(65deg) scale(0.6);
			}
			/* 调整第五个五角星的位置和大小 */
			.vn-flag .five{
				left: 180px;
				top: 180px;
				transform: rotate(85deg) scale(0.6);
			}
			
		</style>
	</head>

	<body>	
		<div class="vn-flag">
			<!-- 大五角星 -->
			<div class="stars one"></div>
			<!-- 四个小五角星 -->
			<div class="stars two"></div>
			<div class="stars three"></div>
			<div class="stars four"></div>
			<div class="stars five"></div>
		</div>		
	</body>

</html>

同学可以试着理解理解；

祝学习愉快~

收起回答

提问者慕仙0240544 #1

老师我有几个小问题想请教下：
1 请问老师这样写不行是吗
2 请问这个::before不是应该以红色背景边界左上方点为标准点吗为什么是这样设left和top的呀
3 最后就是角度和移动px是怎么看的呀这个得在页面上慢慢试出来的是吗谢谢老师

2022-07-03 10:41:06
imooc_慕慕回复提问者慕仙0240544 #2

同学你好，第一个问题，可以这样使用；代码中给他设置了边框，所以使用了上面的方式；
第二个问题；思路是对的，因为伪元素本身也是一个盒子，以红色背景边界左上方点为标准点，这样设置是可以的，向下，向右，top,left为负数，参考如下图：
第三个问题：因为这是个正五角星所以不用计算角度，移动的px确实需要通过控制台来调节，五角星的大小通过题目3:2进行缩放；
祝学习愉快~

2022-07-03 11:42:31