LiuHui's Blog

【CSS】纯CSS绘制五星红旗 🇨🇳

By LiuHui on Sep 5, 2020
Image post 3

theme: channing-cyan

前言

还有二十多天就国庆了，给大家分享一个CSS纯前端绘制国旗的过程 🇨🇳

1、绘制五角星

1、绘制一个三角形

 <div class="big-start"></div>
 .big-start {
    position: relative;
    width: 0;
    height: 0;
    top: 120px;
    left: 60px;
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-bottom: 56px solid #FFEC73;
  }

2、再利用伪元素绘制2个三角形

 <div class="big-start"></div>
 .big-start {
    position: relative;
    width: 0;
    height: 0;
    top: 120px;
    left: 60px;
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-bottom: 56px solid #FFEC73;
	
	&::before {
      position: absolute;
      width: 0;
      height: 0;
      content: "";
      border-right: 24px solid transparent;
      border-left: 24px solid transparent;
      border-bottom: 64px solid red;
    }

    &::after {
      position: absolute;
      width: 0;
      height: 0;
      content: "";
      border-right: 80px solid transparent;
      border-left: 80px solid transparent;
      border-bottom: 56px solid blue;
    }
  }

3、调整位置和角度

 <div class="big-start"></div>
 .big-start {
    position: relative;
    width: 0;
    height: 0;
    top: 120px;
    left: 60px;
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-bottom: 56px solid #FFEC73;
	
	&::before {
      position: absolute;
      width: 0;
      height: 0;
      top: -44px;
      left: -54px;
      content: "";
      border-right: 24px solid transparent;
      border-left: 24px solid transparent;
      border-bottom: 64px solid red;
      transform: rotate(-35deg);
    }

    &::after {
      position: absolute;
      width: 0;
      height: 0;
      top: 3px;
      left: -85px;
      content: "";
      border-right: 80px solid transparent;
      border-left: 80px solid transparent;
      border-bottom: 56px solid blue;
      transform: rotate(-70deg);
    }
  }

2、绘制国旗

1、绘制国旗背景，宽高3:2

<div class="five-start-red-flag"></div>
.five-start-red-flag {
  --flag-color: red;
   
  width: 780px;
  height: 520px;
  margin: 5% auto auto;
  background-color: var(--flag-color);
}

2、绘制大小五角星

<div class="five-start-red-flag">
  <div class="big-start"></div>
  <div class="samll-start-1"></div>
  <div class="samll-start-2"></div>
  <div class="samll-start-3"></div>
  <div class="samll-start-4"></div>
</div>


.five-start-red-flag {
  --start-color: #FFEC73;
  --flag-color: red;
   
  position: relative;
  width: 780px;
  height: 520px;
  margin: 5% auto auto;
  background-color: var(--flag-color);
  
  .big-start {
    position: relative;
    width: 0;
    height: 0;
   
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-bottom: 56px solid var(--start-color);

    &::before {
      position: absolute;
      width: 0;
      height: 0;
      top: -44px;
      left: -54px;
      content: "";
      border-right: 24px solid transparent;
      border-left: 24px solid transparent;
      border-bottom: 64px solid var(--start-color);
      transform: rotate(-35deg);
    }

    &::after {
      position: absolute;
      width: 0;
      height: 0;
      top: 3px;
      left: -85px;
      content: "";
      border-right: 80px solid transparent;
      border-left: 80px solid transparent;
      border-bottom: 56px solid var(--start-color);
      transform: rotate(-70deg);
    }

    transform: rotate(35deg);
  }
  
  
   .samll-start-1, .samll-start-2, .samll-start-3, .samll-start-4 {
    position: relative;
    width: 0;
    height: 0;
    top: -10px;
    left: 260px;
    border-right: 26px solid transparent;
    border-left: 26px solid transparent;
    border-bottom: 18px solid var(--start-color);

    &::before {
      position: absolute;
      width: 0;
      height: 0;
      top: -12px;
      left: -17px;
      content: "";
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
      border-bottom: 21px solid var(--start-color);
      transform: rotate(-35deg);
    }

    &::after {
      position: absolute;
      width: 0;
      height: 0;
      top: 1px;
      left: -27px;
      content: "";
      border-right: 26px solid transparent;
      border-left: 26px solid transparent;
      border-bottom: 18px solid var(--start-color);
      transform: rotate(-70deg);
    }
  }
}

3、调整大小五角星位置和角度

.five-start-red-flag {
  --start-color: #FFEC73;
  --flag-color: red;
   
  position: relative;
  width: 780px;
  height: 520px;
  margin: 5% auto auto;
  background-color: var(--flag-color);
  
  .big-start {
    position: relative;
    width: 0;
    height: 0;
    top: 120px;
    left: 60px;
    border-right: 80px solid transparent;
    border-left: 80px solid transparent;
    border-bottom: 56px solid var(--start-color);

    &::before {
      position: absolute;
      width: 0;
      height: 0;
      top: -44px;
      left: -54px;
      content: "";
      border-right: 24px solid transparent;
      border-left: 24px solid transparent;
      border-bottom: 64px solid var(--start-color);
      transform: rotate(-35deg);
    }

    &::after {
      position: absolute;
      width: 0;
      height: 0;
      top: 3px;
      left: -85px;
      content: "";
      border-right: 80px solid transparent;
      border-left: 80px solid transparent;
      border-bottom: 56px solid var(--start-color);
      transform: rotate(-70deg);
    }
    transform: rotate(35deg);
  }
  
  
   .samll-start-1, .samll-start-2, .samll-start-3, .samll-start-4 {
    position: relative;
    width: 0;
    height: 0;
    top: -10px;
    left: 260px;
    border-right: 26px solid transparent;
    border-left: 26px solid transparent;
    border-bottom: 18px solid var(--start-color);

    &::before {
      position: absolute;
      width: 0;
      height: 0;
      top: -12px;
      left: -17px;
      content: "";
      border-right: 8px solid transparent;
      border-left: 8px solid transparent;
      border-bottom: 21px solid var(--start-color);
      transform: rotate(-35deg);
    }

    &::after {
      position: absolute;
      width: 0;
      height: 0;
      top: 1px;
      left: -27px;
      content: "";
      border-right: 26px solid transparent;
      border-left: 26px solid transparent;
      border-bottom: 18px solid var(--start-color);
      transform: rotate(-70deg);
    }
  }
  
  .samll-start-1 {
    transform: rotate(-20deg);
  }
  
  .samll-start-2 {
    top: 35px;
    left: 320px;
    transform: rotate(10deg)
  }
  .samll-start-3 {
    top: 100px;
    left: 320px;
    transform: rotate(30deg);
  }
  
  .samll-start-4 {
    top: 140px;
    transform: rotate(45deg);
  }
}

在线预览

点我预览

您的鼓励（点赞、关注、收藏）是我持续创作的动力，如果对你有帮助，支持一下，Thanks♪(･ω･)ﾉ 🇨🇳

© Copyright 2022 by GuoguoDad. Built with ♥ by LiuHui.