CSS 오버레이를 사용하여 테두리와 채우기가 있는 육각형을 만드는 방법은 무엇입니까?

테두리와 채우기를 사용하여 육각형 만들기

육각형은 일반적으로 의사 요소를 통해 CSS 테두리를 사용하여 만들어집니다. 한 가지 색상으로 육각형을 채우고 다른 색상으로 윤곽을 그리는 것이 직접적으로 가능하지는 않지만, 대안적인 접근 방식은 여러 개의 육각형을 서로 겹치는 것입니다.

오버레이 방법

육각형을 오버레이하면 이미지에 의존하지 않고도 원하는 효과를 얻을 수 있습니다. 다음 예에서는 이 방법을 보여줍니다.

HTML:

<code class="html"><div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div></code>

CSS:

<code class="css">.hex {
    /* Define shape, size, and colors */
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}

.hex:before, .hex:after {
    /* Create hexagon shape */
    content: "";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}

.hex:before {
    top: -59px;
    border-bottom: 60px solid #6C6;
}

.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}

.hex.inner {
    /* Style inner hexagon */
    background-color: blue;
    transform: scale(.8, .8);
    z-index: 1;
}

.hex.inner:before {
    border-bottom: 60px solid blue;
}

.hex.inner:after {
    border-top: 60px solid blue;
}

.hex.inner2 {
    /* Style innermost hexagon */
    background-color: red;
    transform: scale(.8, .8);
    z-index: 2;
}

.hex.inner2:before {
    border-bottom: 60px solid red;
}

.hex.inner2:after {
    border-top: 60px solid red;
}</code>

이 코드는 서로 다른 색상과 Z-색인을 갖는 세 개의 겹치는 육각형을 만듭니다. 가치. 변환: scale() 속성은 내부 요소의 크기를 비례적으로 줄여 계층화 효과를 만드는 데 사용됩니다.

실시간 예

실시간 예를 볼 수 있습니다. 이 기술의 내용은 다음을 참조하세요: [육각형 테두리 및 채우기 예](https://codepen.io/username/pen/wveBJp)

위 내용은 CSS 오버레이를 사용하여 테두리와 채우기가 있는 육각형을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!