CSS에서 육각형 그림을 구현하는 방법에 대해-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS에서 육각형 그림을 구현하는 방법에 대해

不言

Jun 20, 2018 am 10:33 AM

이 글에서는 CSS로 육각형 이미지를 구현하기 위한 샘플 코드를 주로 소개하고 있는데, 내용이 꽤 좋아서 참고용으로 올려보겠습니다.

이 글에서는 CSS에서 육각형 이미지를 구현하기 위한 샘플 코드를 주로 소개하고 여러분과 공유합니다. 이 육각형 그림을 그리는 원리는 너비와 높이가 같은 세 개의 p를 위치 지정과 회전을 통해 육각형으로 결합한 후 배경 이미지를 겹쳐 시각적인 전체 그림을 형성하는 원리입니다. 아래에서 단계별로 구현해 보겠습니다.

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

그리기 전에 문제를 이해해야 합니다. 즉, 정육각형은 너비와 높이가 같은 3개의 p로 구성되므로(아래 그림 참조) p의 너비와 높이는 다음 조건을 충족해야 합니다. √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>
    <p class=&#39;wrap&#39;>
    </p>
</body>
</html>

로그인 후 복사

효과는 단지 그림입니다

(2) 두 번째 단계는 왼쪽 p와 그 의사 요소 그림을 그리는 것입니다

이 단계에서는 새로운 p 위치를 사용하여 회전합니다. 그리고 육각형의 왼쪽을 스티치합니다. 그리고 새 p 의사 요소의 너비와 높이를 설정하고 위 그림과 일치하는 배경 이미지를 설정합니다. 새 p 의사 요소의 너비와 높이는 너비와 높이입니다. 전체 육각형의 높이. 그런 다음 의사 요소를 회전하여 그림을 수직으로 표시하고(새 p가 회전해야 하므로 의사 요소 그림도 회전하므로 다시 정상 각도로 역회전해야 함) 의사 요소의 위치를 조정해야 합니다. (새 p가 회전되어 의사 요소의 위치 지정에 영향을 줌) 마지막으로 숨겨진 값을 초과하도록 새 p를 설정합니다.

<!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>
    <p class=&#39;wrap&#39;>
        <p class=&#39;left common&#39;></p>
    
    </p>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

(3) 세 번째 단계는 올바른 p와 그 의사 요소 그림을 그리는 것입니다

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

<!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>
    <p class=&#39;wrap&#39;>
        <p class=&#39;left common&#39;></p>
        <p class=&#39;right common&#39;></p>
    </p>
</body>
</html>

로그인 후 복사

이때 글의 시작 부분에 그림을 보여줄 수도 있습니다. 이 원리를 이용하면 다양한 모양의 그림 표시 효과도 만들 수 있습니다. 연구를 계속해 주셔서 감사합니다. 앞으로는 사진 디스플레이가 더 이상 단일 벽돌 라인이 아닐 것입니다! !