CSS로 육각형 그림을 만드는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS로 육각형 그림을 만드는 방법

php中世界最好的语言

Jan 30, 2018 am 10:31 AM

css육각형

이번에는 CSS로 육각형 그림을 만드는 방법을 보여드리겠습니다. CSS로 육각형 그림을 만들 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

이 육각형 그림을 '그리기' 위해서는 의사 요소가 포함된 간단한 div를 사용하는 것이 원칙입니다. 너비와 높이가 같은 세 개의 div를 위치 지정 및 회전을 통해 육각형으로 결합한 다음 배경 이미지를 겹쳐서 완전한 시각적 개체를 형성하는 것입니다. 그림. 단계별로 구현해 보겠습니다.

(1) 따라서 첫 번째 단계는 물론 컨테이너를 그리는 것입니다. 컨테이너는 너비와 높이가 있는 div입니다.

그리기 전에 문제를 이해해야 합니다. 즉, 정육각형은 너비와 높이가 같은 세 개의 div로 구성됩니다(아래 그림과 같이 div의 너비와 높이가 의 조건을 충족해야 함). √3회 정육각형을 만듭니다. 여기서는 이 값을 계산하는 방법을 가르쳐주지 않습니다. 관심이 있는 경우 삼각 함수를 사용하여 직접 계산할 수 있습니다.

여기에서는 외부 컨테이너의 너비를 190px로 설정합니다. 높이를 110px로 설정한 다음 배경 이미지를 설정합니다. 코드는 다음과 같습니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrap{
        height:110px;
        width: 190px;
        position: relative;
        margin: 200px auto;
        background: url(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
    }
</style>
<body>
    <div class=&#39;wrap&#39;>
    </div>
</body>
</html>

(2) 두 번째 단계는 왼쪽 div와 해당 의사 요소 이미지를 그리는 것입니다.

이 단계에서는 새 div를 사용하여 육각형의 왼쪽을 위치시키고 회전시킨 후 새 div의 의사 요소를 설정합니다. 너비와 높이를 위 그림과 동일한 배경 이미지로 설정합니다. 새 div 의사 요소의 너비와 높이는 너비입니다. 그런 다음 이미지가 수직으로 표시되도록 의사 요소를 회전합니다. (새 div를 회전해야 하므로 의사 요소 이미지도 회전하므로 다시 정상으로 회전해야 합니다. 각도) 및 의사 요소의 위치를 조정해야 합니다(새 div가 회전되어 의사 요소의 위치 지정에 영향을 줍니다). 마지막으로 새 div가 숨김을 초과하도록 설정하고 육각형의 왼쪽이 그려집니다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrap{
        height:110px;
        width: 190px;
        position: relative;
        margin: 200px auto;
        background: url(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
23
    }
    .common:before{
        content:&#39;&#39;;
        position: absolute;
        background:url(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
        width: 190px;
        height: 220px;
    }
    .left{
        transform: rotate(60deg);
    }
    .left:before{
        transform: rotate(-60deg) translate(48px,-28px);
    }
</style>
<body>
    <div class=&#39;wrap&#39;>
        <div class=&#39;left common&#39;></div>
     
    </div>
</body>
</html>

(3) 세 번째 단계는 오른쪽의 div와 의사 요소 이미지를 그리는 것입니다

이 단계의 원리는 두 번째 부분과 동일하지만 각도가 반대이므로 자세히 설명하지 않겠습니다. 완성된 코드로 바로가기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .wrap{
        height:110px;
        width: 190px;
        position: relative;
        margin: 200px auto;
        background: url(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
 
    }
    .common:before{
        content:&#39;&#39;;
        position: absolute;
        background:url(&#39;./eddie.jpg&#39;) 50% 50% no-repeat;
        background-size: auto 220px;
        width: 190px;
        height: 220px;
    }
    .left{
        transform: rotate(60deg);
    }
    .left:before{
        transform: rotate(-60deg) translate(48px,-28px);
    }
    .right{
        transform: rotate(-60deg);
    }
    .right:before{
         transform: rotate(60deg) translate(48px,28px);
         bottom: 0;
    }
</style>
<body>
    <div class=&#39;wrap&#39;>
        <div class=&#39;left common&#39;></div>
        <div class=&#39;right common&#39;></div>
    </div>
</body>
</html>

이쯤 되면 글의 시작 부분에 있는 그림을 표시할 수 있습니다. 이 원리를 이용해서 다른 그림 표시 효과도 만들 수 있습니다. 앞으로도 계속 공부해 보세요. , 사진 디스플레이는 더 이상 단일 벽돌이 아닙니다!

이 사례를 읽고 나면 더 흥미로운 기사를 보려면 PHP 중국어 웹사이트에 있는 다른 관련 기사를 주목하세요! 읽기:

HTML5 드롭다운 상자에서 사용자 경험을 높이는 방법

H5의 WebGL을 사용하는 방법 동일한 인터페이스로 json 및 echarts 차트 만들기

H5의 새로운 의미 체계 태그 기능을 사용하는 방법

위 내용은 CSS로 육각형 그림을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

CSS 그리드는 무엇입니까?Apr 30, 2025 pm 03:21 PM

CSS 그리드는 복잡하고 반응이 좋은 웹 레이아웃을 만드는 강력한 도구입니다. 디자인을 단순화하고 접근성을 향상 시키며 이전 방법보다 더 많은 제어를 제공합니다.

CSS Flexbox 란 무엇입니까?Apr 30, 2025 pm 03:20 PM

기사는 반응 형 설계에서 공간의 효율적인 정렬 및 분포를위한 레이아웃 방법 인 CSS Flexbox에 대해 설명합니다. Flexbox 사용을 설명하고 CSS 그리드와 비교하고 브라우저 지원 세부 사항을 설명합니다.

CSS를 사용하여 웹 사이트를 반응하게 만드는 방법은 무엇입니까?Apr 30, 2025 pm 03:19 PM

이 기사는 Viewport Meta 태그, 유연한 그리드, 유체 미디어, 미디어 쿼리 및 상대 장치를 포함하여 CSS를 사용하여 반응 형 웹 사이트를 만드는 기술에 대해 설명합니다. 또한 CSS 그리드 및 Flexbox를 함께 사용하여 CSS 프레임 워크를 권장합니다.