css3编写一面五星红旗

热爱祖国用css编写了五行红旗代码，存粹css编写哟~

先上一效果图吧，

五星红旗用css画法主要是由三个三角形拼接而成，配上css旋转、定位等等~

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>五行红旗</title>
  <style type="text/css">
    *{
      padding: 0;
      margin: 0;
    }
    body{
      background-color: #ccc;
    }
    /* 样式开始 */
    .china_flag {
      width: 600px;
      height: 400px;
      background: #DE2910;
      margin: 200px;
    }
    /* 大星星样式合并 */
    .big_star,.big_star::before,.big_star::after{
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-bottom: 38px solid #FFDE00;
      border-right: 50px solid transparent;
      position: relative;
    }
	.big_star{    
      top: 97px;
      left: 65px;
      transform: scale(1.3) rotate(38deg);
		}
    .big_star::before{
      content: '';
      display: block;
      transform: rotate(69deg);
      left: -48px;
      top: -2px;
    }
	.big_star::after{
      content: '';
      display: block;
      transform: rotate(-77deg);
      left: -53px;
      top: -35px;
	}

    /* 小星星代码合并 */
    .small1,.small2,.small3,.small4{
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-bottom: 19px solid #FFDE00;
      border-right: 25px solid transparent;
      position: relative;
    }
    .small1::before,.small2::before,.small3::before,.small4::before{
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-bottom: 19px solid #FFDE00;
      border-right: 25px solid transparent;
      position: relative;
      left: -23px;
      top: 1px;
      transform: rotate(69deg);
    }
    .small1::after,.small2::after,.small3::after,.small4::after{
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 25px solid transparent;
      border-bottom: 19px solid #FFDE00;
      border-right: 25px solid transparent;
      position: relative;
      left: -25px;
      top: -19px;
      transform: rotate(-76deg);
    }

    .small1{
      transform: scale(0.8) rotate(58deg);
      top: -15px;
      left: 179px;    
		}
    .small2{
      transform: scale(0.8) rotate(72deg);
      top: 15px;
      left: 227px;
		}
    .small3{
      transform: scale(0.8) rotate(115deg);
      top: 64px;
      left: 227px;
		}
    .small4{
      transform: scale(0.8) rotate(140deg);
      top: 99px;
      left: 179px;
    }


	</style>
</head>
<body>
  <div class="china_flag">
    <!-- 大星星 -->
    <div class="big_star"></div>
    <!-- 四颗小星星 -->
    <div class="small1"></div>
    <div class="small2"></div>
    <div class="small3"></div>
    <div class="small4"></div>
  </div>
</body>
</html>

低调的小犬_Hansen

发布了62 篇原创文章 · 获赞 11 · 访问量 8617

私信关注

css3编写一面五星红旗

猜你喜欢