2-13，麻烦老师检查！

来源：2-13 编程练习

脑袋瓜瓜嗡嗡的

2022-05-09 20:35:18

<!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;
        }
        /* 国旗背景 */
        .bg{
            width: 1200px;
            height: 800px;
            background-color: red;
            position: relative;
          }
          /* 绘制五角星 */
        .start_part{
            position: absolute;
            width: 0;
            height: 0;
            border: 50px solid transparent;
            border-top-color: yellow;
        }
        .s1{
            transform: rotate(67.5deg);
            top: 35px;
            left: 107px;
        }
        .s2{
            transform: rotate(139.5deg);
            top: 15px;
            left: 138px;
        }
        .s3{
            transform: rotate(211.5deg);
            top: 38px;
            left: 163px;
        }
        .s4{
            transform: rotate(283.5deg);
            top: 70px;
            left: 151px;
        }
        .s5{
            transform: rotate(355.5deg);
            top: 67px;
            left: 115px;
        }
        /* 第一颗五角星 */
        .start1{
            position: absolute;
            top: 97px;
            left: -25px;
        }
        /* 第二颗五角星 */
        .start2{
            position: absolute;
            top: 66px;
            left: 188px;
            transform: scale(0.4) rotate(-30deg);
        }
        /* 第三颗五角星 */
        .start3{
            position: absolute;
            top: 123px;
            left: 267px;
            transform: scale(0.4) rotate(-15deg);
        }
        /* 第四颗五角星 */
        .start4{
            position: absolute;
            top: 202px;
            left: 283px;
            transform: scale(0.4) rotate(15deg);
        }
        /* 第五颗五角星 */
        .start5{
            position: absolute;
            top: 268px;
            left: 225px;
            transform: scale(0.4) rotate(30deg);
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="start1">
            <div class="start_part s1"></div>
            <div class="start_part s2"></div>
            <div class="start_part s3"></div>
            <div class="start_part s4"></div>
            <div class="start_part s5"></div>
        </div>
        <div class="start2">
            <div class="start_part s1"></div>
            <div class="start_part s2"></div>
            <div class="start_part s3"></div>
            <div class="start_part s4"></div>
            <div class="start_part s5"></div>
        </div>
        <div class="start3">
            <div class="start_part s1"></div>
            <div class="start_part s2"></div>
            <div class="start_part s3"></div>
            <div class="start_part s4"></div>
            <div class="start_part s5"></div>
        </div>
        <div class="start4">
            <div class="start_part s1"></div>
            <div class="start_part s2"></div>
            <div class="start_part s3"></div>
            <div class="start_part s4"></div>
            <div class="start_part s5"></div>
        </div>
        <div class="start5">
            <div class="start_part s1"></div>
            <div class="start_part s2"></div>
            <div class="start_part s3"></div>
            <div class="start_part s4"></div>
            <div class="start_part s5"></div>
        </div>    
    </div>
   
</body>
</html>

写回答

1回答

好帮手慕久久

2022-05-10

已采纳

同学你好，思路是对的，就是实际效果不太好看。使用5个三角形拼成五角星时，各个三角形的旋转角度、位置调整起来太麻烦了。老师建议用三个三角形实现，这样调整起来相对简单些：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        * {
            margin: 0;
            padding: 0;
        }
 
        /*旗子底部 */
        .container {
            width: 600px;
            height: 400px;
            margin: 0 auto;
            background: red;
            overflow: hidden;
        }
 
        /* 调整大五角星的位置 */
        .inner {
            margin-left: 50px;
            margin-top: 80px;
        }
 
        /* 构成五角星的 第一个三角形 */
        .inner div {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 35px solid yellow;
            position: relative;
            transform: rotate(35deg);
        }
 
        /* 构成五角星的 第二个三角形 */
        .inner div:before {
            display: block;
            content: '';
            height: 0;
            width: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 35px solid green;
            position: absolute;
            left: -52px;
            top: 2px;
            opacity: 0.5;
            transform: rotate(287deg)
        }
 
        /* 构成五角星的 第三个三角形 */
        .inner div:after {
            display: block;
            content: '';
            height: 0;
            width: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 35px solid blue;
            position: absolute;
            left: -52px;
            top: 3px;
            opacity: 0.5;
            transform: rotate(215deg);
        }
        /* 4个小五角星,移动到合适位置 */
        .inner .smallStar:nth-child(2) {
            transform: translate(82px, -94px) rotate(-10deg) scale(0.4);
        }
 
        .inner .smallStar:nth-child(3) {
            transform: translate(117px, -87px) rotate(0deg) scale(0.4);
        }
 
        .inner .smallStar:nth-child(4) {
            transform: translate(115px, -70px) rotate(36deg) scale(0.4);
        }
 
        .inner .smallStar:nth-child(5) {
            transform: translate(81px, -63px) rotate(0deg) scale(0.4);
        }
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div class="container">
        <div class="inner">
            <div class="bigStar"></div>
            <div class="smallStar"></div>
            <div class="smallStar"></div>
            <div class="smallStar"></div>
            <div class="smallStar"></div>
        </div>
    </div>
</body>
</html>

知道实现思路就行，不用纠结具体数值。

祝学习愉快!

0 学习 · 17877 问题

查看课程

相似问题

2-14,麻烦老师检查一下！

回答 1

2-13 编程练习提交

回答 1

老师麻烦检查

回答 1

2-13 作业，请老师帮忙检查一下

回答 1

请老师检查

回答 1

打开慕课网App查看更多内容