CSS를 사용하여 테두리가 있는 육각형 모양을 어떻게 만들 수 있습니까?

테두리와 윤곽선이 있는 육각형 모양

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!