CSS로 토고 국기 그리기-CSS 튜토리얼-php.cn

CSS로 토고 국기 그리기

Susan Sarandon

풀어 주다： 2024-11-22 11:54:14

원래의

294명이 탐색했습니다.

토고 국기에 대한 Wikipedia 페이지를 확인하면 다음과 같이 설명됩니다.

녹색과 노란색이 번갈아 나타나는 5개의 가로 줄무늬
왼쪽 상단에 빨간색 사각형 필드
빨간 바탕에 하얀 오각별
비율은 3:5입니다(높이 3단위마다 너비 5단위)

Drawing Togo

색상은 다음을 사용합니다.

녹색을 위한 #006a4e
노란색은 #ffce00
#d21034 레드용
#fff

HTML

단일 HTML 요소를 사용하여 이 플래그를 코딩합니다.

<div role="img" aria-label="Flag of Togo">



<p>For accessibility reasons, we added a couple of attributes:<br>
role="img" to indicate the element represents an image.<br>
aria-label="Flag of Togo" so assistive technologies can announce the image as Togo's flag.</p>

<p>Maybe it would be better to have a second visually-hidden element with the flag's "alternative text" linked with an aria-labelledby, but we'll keep it as a single element for simplicity.</p>
<h2>
  
  
  CSS
</h2>

<p>Let's start by setting the flag properties that will be needed:<br>
</p>

<pre class="brush:php;toolbar:false">.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
}

로그인 후 복사

종횡비를 사용하여 플래그의 비율을 설정합니다(이 경우 너비가 먼저임). 그리고 절대 위치 의사 요소를 사용하여 별을 그릴 것이므로 상대 위치를 설정하고 이를 플래그 컨테이너 내에 유지하려고 합니다.

배경에는 녹색, 노란색, 녹색, 노란색, 녹색의 5개 가로 스트립이 필요합니다. 이는 반복 선형 그라데이션을 사용하여 쉽게 코딩할 수 있는 녹색과 노란색의 반복 패턴입니다.

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);
}

로그인 후 복사

Drawing Togo

이제 막대가 생겼으니 왼쪽 상단에 빨간색 사각형이 필요합니다. 의사 요소를 사용할 수도 있지만 대신 배경에 또 다른 그라데이션을 추가하겠습니다.

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: 
    linear-gradient(#d21034 0 0) 0 0 / 36% 60% no-repeat,
    repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);
}

로그인 후 복사

이 새로운 그라데이션은 완전히 빨간색(#d21034 0 0)이며 깃발의 왼쪽 상단(0 0)에 위치하며 폭은 36%, 높이는 깃발의 60%(36% 60%)입니다. ) 그래서 3:5 비율을 유지하여 정사각형이 됩니다(36 = 60 * 3/5). 그리고 반복되지 않는지(no-repeat) 확인해야 합니다. 그렇지 않으면 컨테이너 전체를 차지하고 모든 것이 빨간색으로 표시됩니다.

Drawing Togo

이로써 깃발을 놓을 기반이 생겼고, 별을 그려야 합니다. 원뿔형 그래디언트를 사용하여 이를 수행할 수 있지만 이는 목에 약간의 고통이 될 것입니다. 대신 의사 요소를 사용한 다음 클립 경로를 사용하여 별 모양으로 자릅니다.

.flag.togo::before {
  content: "";
  width: 20%;
  aspect-ratio: 1;
  position: absolute;
  /* half of the size of the red square */
  left: 18%;
  top: 30%;
  /* translated half its size to top and left to center it */
  transform: translate(-50%, -50%);
  background: #fff;
  clip-path: polygon(50% 2%, 62% 39%, 100% 39%, 69% 61%, 81% 98%, 
                     50% 75%, 19% 98%, 31% 61%, 0% 39%, 38% 39%);
}

로그인 후 복사

참고: 이는 별의 대략적인 지점입니다. 삼각법을 사용하여 완벽하게 만들 수 있습니다. 그러나 이것은 충분히 좋은 근사치로 작동할 것입니다.
이것으로 우리는 끝났습니다! 토고 국기의 전체 CSS 코드는 다음과 같습니다.

.flag.togo {
  aspect-ratio: 5 / 3;
  position: relative;
  background: 
    linear-gradient(#d21034 0 0) 0 0 / 36% 60% no-repeat,
    repeating-linear-gradient(#006a4e 0 20%, #ffce00 0 40%);

  &::before {
    content: "";
    width: 20%;
    aspect-ratio: 1;
    position: absolute;
    left: 18%;
    top: 30%;
    background: #fff;
    clip-path: polygon(50% 2%, 62% 39%, 100% 39%, 69% 61%, 81% 98%, 
                       50% 75%, 19% 98%, 31% 61%, 0% 39%, 38% 39%);
  }
}

로그인 후 복사

Drawing Togo