html, css로 태극기 그리기

html, css만으로 태극기 그리기

1. 가로:세로 비율 = 3:2
2. 대각선 각도는 약 33.69deg. -33.69deg
3. 따라서 대각선에 수직인 건곤감리의 각도는 123.69deg, -123.69deg

 <style>
      /*33.67deg*/
      /*sin 101.694 */
      /*cos 152.542*/
      .paper {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        width: 600px;
        height: 400px;
        background-color: white;
      }
      /* .paper::before {
        content: "";
        position: absolute;
        width: 700px;
        height: 1px;
        transform: rotate(33.69deg);
        border-top: 2px dashed #000;
      }
      .paper::after {
        content: "";
        position: absolute;
        width: 700px;
        height: 1px;
        transform: rotate(-33.69deg);
        border-top: 2px dashed #000;
      }
      .bigcircle {
        position: absolute;
        width: 300px;
        height: 300px;
        border: 2px dashed #000;
        border-radius: 50%;
      } */
      .circle {
        width: 200px;
        height: 200px;
        background-color: #c60c30;
        border-bottom: 100px solid #003478;
        box-sizing: border-box;
        border-radius: 50%;
        position: relative;
        transform: rotate(33.69006753deg);
        z-index: 10;
      }

      .circle::before {
        content: "";
        width: 100px;
        height: 100px;
        background-color: #c60c30;
        position: absolute;
        top: 50%;
        border-radius: 50%;
      }
      .circle::after {
        content: "";
        width: 100px;
        height: 100px;
        background-color: #003478;
        position: absolute;
        top: 50%;
        right: 0;
        border-radius: 50%;
      }
      .grid {
        display: flex;
        width: 100px;
        height: 66.666px;
        position: absolute;
        flex-wrap: wrap;
        gap: 8px;
      }
      .grid > div {
        background-color: #000;
        height: 16.666px;
      }
      .long {
        width: 100px;
        height: 16.666px;
      }
      .short {
        width: 45.8px;
        height: 16.666px;
      }
      .sky {
        transform: translateX(-152.542px) translateY(-101.694px)
          rotate(123.69deg);
      }
      .earth {
        transform: translateX(-152.542px) translateY(+101.694px)
          rotate(-123.69deg);
      }
      .water {
        transform: translateX(+152.542px) translateY(-101.694px)
          rotate(-123.69deg);
      }
      .fire {
        transform: translateX(+152.542px) translateY(+101.694px)
          rotate(123.69deg);
      }
    </style>
    <div class="paper">
      <div class="circle"></div>
      <div class="bigcircle"></div>

      <div class="sky grid">
        <div class="long"></div>
        <div class="long"></div>
        <div class="long"></div>
      </div>

      <div class="earth grid">
        <div class="long"></div>
        <div class="short"></div>
        <div class="short"></div>
        <div class="long"></div>
      </div>

      <div class="water grid">
        <div class="short"></div>
        <div class="short"></div>
        <div class="long"></div>
        <div class="short"></div>
        <div class="short"></div>
      </div>

      <div class="fire grid">
        <div class="short"></div>
        <div class="short"></div>
        <div class="short"></div>
        <div class="short"></div>
        <div class="short"></div>
        <div class="short"></div>
      </div>
    </div>

1.