CSS를 사용하여 배경 이미지로 육각형을 만드는 방법은 무엇입니까?

배경 이미지가 있는 육각형

CSS를 사용하여 HTML에서 육각형 모양을 만드는 것은 비교적 간단합니다. 그러나 육각형 안에 이미지를 추가하는 것은 좀 더 어려울 수 있습니다.

이 효과를 얻으려면 변환 및 오버플로 속성을 사용하여 CSS3의 강력한 기능을 활용할 수 있습니다. 오버플로가 숨겨짐으로 설정된 다양한 회전 값을 사용하면 육각형 모양 내에 이미지를 추가할 수 있는 크로스 브라우저 마스크를 생성할 수 있습니다.

다음은 생성 방법을 보여주는 예입니다. 배경 이미지가 있는 육각형:

.hexagon-bg {
    width: 100px;
    height: 86.61px;
    margin: auto;
    border-bottom: 20px solid red;
    position: relative;
    overflow: hidden;
}

.hexagon-bg:before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(background-image.png);
    transform: rotate(30deg);
    position: absolute;
}

<div class="hexagon-bg">
</div>

이 기술은 지정된 배경 이미지가 육각형 모양 안에 나타날 수 있도록 하는 크로스 브라우저 마스크를 만듭니다. 이전 브라우저에서는 이 기능을 지원하지 않을 수 있지만 Chrome, Firefox, Safari와 같은 최신 브라우저에서는 의도한 대로 효과가 렌더링된다는 점에 유의하는 것이 중요합니다.

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