CSS로 대만 국기 그리기

@alvaromontoro 님의 작품에 깊은 감동을 받았습니다

CSS로 토고 국기 그리기

Alvaro Montoro ・ 11월 19일

#css #html #웹개발

단일 div와 여러 가지 마법의 CSS를 사용하여 토고 국기를 그리는 것입니다. 그것은 나에게 정말로 놀라운 일이다. 그러므로 나도 같은 일을 하고 싶다. 내가 한 방법은 다음과 같습니다.

HTML

를 하나 추가합니다. 일부 아리아 속성이 있습니다. 이것이 깃발을 표현하는 싱글

이 될 것입니다.

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

CSS

@alvaromontoro와 같은 방법을 사용하여 대만 국기의 기본 배경을 만들었습니다. 빨간색 배경색과 왼쪽 상단에 파란색 직사각형이 있습니다.

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

태양

자, 가장 쉬운 부분은 끝났습니다. 이제 실제 거래를 할 시간입니다. 깃발 위의 태양.

12개의 광선과 중앙에 원이 있어 꽤 복잡해 보입니다. 의사 요소인 ::before 및 ::after를 사용하여 그리는 것이 어떻게 가능합니까? 클립 경로만 있는 것처럼 느껴집니다. path()는 우리가 원하는 어떤 모양이든 그릴 수 있기 때문에 path()가 이를 수행하는 유일한 방법입니다. 그러나 Clip-path: path()에는 치명적인 단점이 있습니다. 즉, 응답하지 않습니다! 즉, 해당 접근 방식을 선택하면 플래그의 크기가 하나만 있을 수 있습니다.

저는 대만 국기의 SVG 파일을 여러 개 검색하기 시작했습니다. 그리고 태양을 표현하기 위해 2가지 요소만 사용한다는 것을 알아냈습니다.

1. 흰색 12빔 별
2. 파란색 테두리가 있는 흰색 원

원을 별의 중심에 놓을 때. 원하는 간격으로 원을 둘러싸는 12개의 광선이 있는 것처럼 보입니다. 정말 똑똑해요!. 디자이너들은 이미 태양을 그리는 영리한 방법을 알아낸 것 같습니다. 이 접근 방식을 사용하면 ::before를 원으로, ::after를 별표로 사용할 수 있습니다.

12빔 스타

대만 국기 SVG 파일을 찾는 것은 매우 쉽습니다. 불행히도 모든 별은 path()에 의해 그려집니다. path()가 실제

정말 어려운 문제입니다. 나의 최종 해결책은 실제로 12빔 별의 모든 점의 모든 위치를 계산하는 것입니까? 저는 이 환상적인 온라인 SVG Path Editorhttps://yqnn.github.io/svg-path-editor/를 활용하여 경로의 모든 지점을 시각화했습니다.

그리고 수학을 아주 잘하는 사랑하는 동생에게 나머지 점들의 위치는 무엇인지 물었습니다. 그는 mathematica를 사용하여 12개의 일차 방정식을 풀고 모든 점수를 얻었습니다! ?

그런 다음 경로 편집기로 돌아가 별의 윤곽선을 경로로 그리고 크기를 조정하여 100*100 범위가 되도록 했습니다.

이미 100*100 범위에 있으므로 모든 위치를 백분율로 변환합니다. 결과적으로 깃발에 별을 표시할 수 있게 되었습니다

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

원

서클이 비교적 쉽습니다. 그러나 나의 첫 번째 시도는 국경을 이용하는 것이었다. 테두리 너비가 px만 가능하기 때문에 실패했습니다. 방사형 그라데이션을 사용하도록 변경했습니다. 까다로운 부분은 방사형 그라데이션의 백분율이 요소의 대각선이어야 하므로 수학도 필요하지만 그렇게 어렵지는 않다는 것입니다.

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

결과

전체 CSS는

&::after {
    content: '';
    position: absolute;
    top: 6.25%;
    left: 12.5%;
    width: 25%;
    height: calc(3 / 8 * 100%);
    background: white;
    clip-path: polygon(50% 0%,56.6987% 25%,75% 6.6987%,68.3013% 31.6987%,93.3013% 25%,75% 43.3013%,100% 50%,75% 56.6987%,93.3013% 75%,68.3013% 68.3013%,75% 93.3013%,56.6987% 75%,50% 100%,43.3013% 75%,25% 93.3013%,31.6987% 68.3013%,6.6983% 75%,25% 56.6987%,0% 50%,25% 43.3013%,6.6983% 25%,31.6987% 31.6987%,25% 6.6983%,43.3013% 25%);;
  }

아래에서 제가 작성한 코드펜 작업도 확인하실 수 있습니다

좋아하셨으면 좋겠습니다!

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

css html if for math using this display border background github

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.