CSS로 토고 국기 그리기

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

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

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

• 녹색을 위한 #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%);
}

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

.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) 확인해야 합니다. 그렇지 않으면 컨테이너 전체를 차지하고 모든 것이 빨간색으로 표시됩니다.

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

.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%);
  }
}

몇 가지 생각

플래그 스타일에 display: inline-block을 추가하면 텍스트와 일치하도록 할 수 있습니다. 이 경우 가로 세로 비율 속성이 마술을 부리고 다른 값을 자동으로 설정할 수 있도록 높이나 너비를 설정해야 합니다.

이 깃발을 그리면서 우리는 다음을 연습했습니다.

• 포지셔닝: 상대적이고 절대적인
• 그라디언트: 선형 및 반복 선형
• 종횡비: 플래그와 별의 크기 설정
• 클립 경로: 별 모양
• 유사 요소: 별 자체를 생성

이 짧은 튜토리얼이 도움이 되셨기를 바랍니다. 선형 그라데이션뿐만 아니라 다양한 그라데이션이 작동하는 방식을 설명하는 다른 플래그와 함께 새 플래그를 곧 출시할 계획입니다. 주목해주세요!

위 내용은 CSS로 토고 국기 그리기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!