html五星红旗的代码

最新推荐文章于 2024-10-07 20:37:40 发布

蓝色火焰6

最新推荐文章于 2024-10-07 20:37:40 发布

阅读量641

点赞数 2

文章标签： html5

本文链接：https://blog.csdn.net/weixin_59089605/article/details/136318367

版权

<!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>
    <link rel="stylesheet" href="" />
    <script src=""></script>
    <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    .qi {
      width: 864px;
      height: 576px;
      background-color: red;
    }

    .tri {
      width: 0;
      height: 0;
      top: 90px;
      left: 45px;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 70px solid yellow;
      position: absolute;
      margin: auto;
      display: block;
      transform: rotate(35deg);
    }

    .tri::before {
      content: "";
      height: 0px;
      width: 0px;
      position: absolute;
      display: block;
      top: -45px;
      left: -65px;
      border-right: 30px solid transparent;
      border-bottom: 80px solid yellow;
      border-left: 30px solid transparent;
      transform: rotate(-35deg);
    }

    .tri::after {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      display: block;
      top: 3px;
      left: -105px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid yellow;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
    }

    #one {
      top: 30px;
      left: 280px;
    }

    #two {
      top: 80px;
      left: 340px;
    }

    #three {
      top: 150px;
      left: 340px;
    }

    #four {
      top: 210px;
      left: 280px;
    }

    .min {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-bottom: 14px solid yellow;
      position: absolute;
      margin: auto;
      display: block;
      transform: rotate(35deg);
    }

    .min::before {
      content: "";
      height: 0px;
      width: 0px;
      position: absolute;
      display: block;
      top: -10px;
      left: -12px;
      border-right: 6px solid transparent;
      border-bottom: 16px solid yellow;
      border-left: 6px solid transparent;
      transform: rotate(-35deg);
    }

    .min::after {
      content: "";
      width: 0;
      height: 0;
      position: absolute;
      display: block;
      top: 0px;
      left: -20px;
      border-right: 20px solid transparent;
      border-bottom: 14px solid yellow;
      border-left: 20px solid transparent;
      transform: rotate(-70deg);
    }
  </style>
  <body>
    <div class="qi"></div>
    <div class="tri"></div>
    <div id="one" class="min"></div>
    <div id="two" class="min"></div>
    <div id="three" class="min"></div>
    <div id="four" class="min"></div>
  </body>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
  <script></script>
</html>