CSS 의사 요소를 사용하여 육각형 모양을 만드는 것은 잘 알려진 기술입니다. 그러나 다른 색상의 테두리를 직접 추가하는 것은 어려울 수 있습니다. 이 기사에서는 원하는 효과를 얻기 위한 대체 접근 방식을 살펴봅니다.
다양한 크기와 색상의 여러 육각형을 겹쳐서 원하는 색상 채우기를 유지하면서 경계가 있는 육각형의 환상을 만드는 것이 가능합니다.
구현예
HTML:
<div class="hex"> <div class="hex inner"> <div class="hex inner2"></div> </div> </div>
CSS:
.hex { ... /* Hexagon shape and basic styles */ } .hex inner { background-color: blue; ... /* Transform and scaling */ } .hex inner2 { background-color: red; ... /* Transform and scaling */ }
작동 원리:
가장 바깥쪽의 .hex 요소는 기본 육각형의 모양과 색상을 정의합니다. 그 안에 두 개의 중첩된 .hex 요소가 추가되며 각각은 배경색이 다릅니다. 변환: scale()을 사용하여 이러한 내부 요소의 크기를 비례적으로 조정하면 육각형 모양을 유지하면서 축소됩니다. 그 결과 서로 다른 색상의 육각형이 오버레이되어 테두리가 있는 육각형 모양이 생성됩니다.
라이브 예:
[육각형 예](https://www. example.com/hexagon-example/)
대안:
이미지를 선택할 수 없는 경우 다른 대체 기술로는 SVG, Canvas 또는 CSS 마스크 속성 사용 등이 있습니다. .
위 내용은 CSS를 사용하여 테두리가 있는 육각형 모양을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!