代码效果图炸展示

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .red{
  8.             width: 300px;
  9.             height: 200px;
  10.             background: red;
  11.             margin: 0 auto;
  12.             position:relative;
  13.             /*300*200的红色国旗居中显示设置相对定位*/
  14.         }
  15.         .xx{
  16.             width: 0px;
  17.             height: 0px;
  18.             border-bottom:70px solid yellow;/*黄色钝角三角形*/
  19.             border-left:100px solid transparent;/*透明*/
  20.             border-right:100px solid transparent;
  21.             margin: 50px auto;
  22.             /*浏览器计算外边距移动至中间*/
  23.             position: relative;/*定位*/
  24.             -webkit-transform: rotate(35deg);
  25.             /*顺时针旋转*/
  26.                -moz-transform: rotate(35deg);
  27.                  -o-transform: rotate(35deg);
  28.                      transform:rotate(35deg);
  29.         }
  30.         .xx::before{
  31.             content: "";
  32.             width: 0px;
  33.             height: 0px;
  34.             border-bottom:80px solid yellow;
  35.             border-left: 30px solid transparent;
  36.             border-right: 30px solid transparent;
  37.             position: absolute;
  38.             /*对应前面的position: relative;使用*/
  39.             top: -47px;
  40.             left: -65px;
  41.             -webkit-transform: rotate(-35deg);
  42.                -moz-transform: rotate(-35deg);
  43.                  -o-transform: rotate(-35deg);
  44.                      transform:rotate(-35deg);
  45.         }
  46.         .xx::after{
  47.             content: "";
  48.             width: 0px;
  49.             height: 0px;
  50.             border-bottom:70px solid yellow;
  51.             border-left: 100px solid transparent;
  52.             border-right: 100px solid transparent;
  53.             position: absolute;
  54.             top: 3px;
  55.             left: -105px;
  56.             -webkit-transform: rotate(-70deg);
  57.                -moz-transform: rotate(-70deg);
  58.                  -o-transform: rotate(-70deg);
  59.                      transform:rotate(-70deg);
  60.         }/*以上是随伪元素标签进行旋转的出的五角星*/
  61.         /*后面将五角星元素标签带入各个父元素中去进行旋转平移获得国旗*/
  62.         .big{
  63.             transform:scale(0.4);/*缩放0.4倍*/
  64.             position: absolute;
  65.             top:-30px;
  66.             left: -40px;
  67.         }
  69.         .little1{
  70.             transform: scale(0.1) rotate(20deg);
  71.             /*-webkit-transform: rotate(20deg);
  72.                -moz-transform: rotate(20deg);
  73.                -o-transform: rotate(20deg);*/
  74.                position: absolute;
  75.                top:-63px;
  76.                left: 20px;
  77.            }
  78.            .little2{
  79.                transform: scale(0.1) rotate(64deg);
  80.             /*-webkit-transform: rotate(64deg);
  81.                -moz-transform: rotate(64deg);
  82.                -o-transform: rotate(64deg);*/
  83.                position: absolute;
  84.                top:-34px;
  85.                left: 45px;
  86.            }
  87.            .little3{
  88.                transform: scale(0.1) rotate(91deg);
  89.             /*-webkit-transform: rotate(91deg);
  90.                -moz-transform: rotate(91deg);
  91.                -o-transform: rotate(91deg);*/
  92.                position: absolute;
  93.                top:-1px;
  94.                left: 38px;
  95.            }
  96.            .little4{
  97.                transform: scale(0.1) rotate(173deg);
  98.             /*-webkit-transform: rotate(173deg);
  99.                -moz-transform: rotate(173deg);
  100.                -o-transform: rotate(173deg);*/
  101.                position: absolute;
  102.                top:27px;
  103.                left: 12px;
  104.            }
  105.        </style>
  106.    </head>
  107.    <body>
  108.        <div class="red">
  110.            <div class="xing big">
  112.                <div class="xx"></div>
  114.            </div>
  116.            <div class="xing little1">
  118.                <div class="xx"></div>
  120.            </div>
  122.            <div class="xing little2">
  124.                <div class="xx"></div>
  126.            </div>
  128.            <div class="xing little3">
  130.                <div class="xx"></div>
  132.            </div>
  134.            <div class="xing little4">
  136.                <div class="xx"></div>
  138.            </div>
  139.        </div>
  140.    </body>
  141.    </html>