육각형으로 채워진 이미지 배경을 만드는 CSS

이번에는 CSS를 사용하여 이미지 배경으로 채워진 육각형을 만드는 방법을 보여 드리겠습니다. CSS를 사용하여 이미지 배경으로 채워진 육각형을 만들 때의 주의 사항은 무엇입니까? 아래에서 실제 사례를 살펴보겠습니다.

정육각형의 구현 원리는 실제로 아래 그림과 같이 세 개의 겹쳐진 직사각형을 회전시켜 얻어집니다.

양의 육각형을 얻으려면 두 직사각형의 회전 각도가 -60도와 60도가 되어야 하며, 직사각형 종횡비는 Math.sqrt(3): 1

이어야 합니다. 그런 다음 먼저 세 개의 직사각형을 만들어야 합니다.

    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

세 직사각형의 너비와 높이를 각각 60px과 104px로 설정하고 배경색은 파란색입니다. .hexagonitem_left는 -60deg를 회전하고, .hexagonitem_right는 60deg를 회전하고, .hexagonitem_center는 회전하지 않습니다.

      .hexagon {
            width: 60px;
            height: 104px;
            position: relative;
            margin: 200px auto;
        }
        .hexagonitem {
            width: 100%;
            height: 100%;
            background: blue;
            position: absolute;
            top: 0;
            left: 0;
        }
        .hexagonitem_left {
            transform: rotate(-60deg);
        }
        .hexagonitem_right {
            transform: rotate(60deg);
        }

이런 식으로 간단하게 정육각형을 얻을 수 있습니다.

파란색 배경을 그림으로 바꾸려면 어떻게 해야 할까요? 위의 세 직사각형은 실제로는 visibility로 설정해야 합니다. 세 개의 직사각형 각각에 직사각형 하위 요소를 추가하고 가시성: 표시로 설정합니다.

세 가지 하위 요소의 너비와 높이는 이전 파란색 육각형만 덮으면 됩니다.

코드는 다음과 같습니다. 주의 깊게 공부하시면 됩니다.

    
    
    
    
    


    <p class="hexagon">
        <p class="hexagonitem hexagonitem_left"></p>
        <p class="hexagonitem hexagonitem_center"></p>
        <p class="hexagonitem hexagonitem_right"></p>
    </p>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

CSS 이상한 상자 모델과 표준 상자 모델을 사용하는 방법

CSS를 사용하여 아코디언 레이아웃을 구현하는 방법

위 내용은 육각형으로 채워진 이미지 배경을 만드는 CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!