집 >웹 프론트엔드 >CSS 튜토리얼 >CSS로 육각형 그림을 만드는 방법

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

php中世界最好的语言원래의: 2018-03-20 16:51:141980검색

이번에는 CSS로 육각형 이미지를 만드는 방법과 CSS로 육각형 이미지를 만들 때의 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

이 글에서는 CSS에서 육각형 이미지를 구현하기 위한 샘플 코드를 주로 소개하고 여러분과 공유합니다. Pseudo elements, and that's 이 육각형 그림을 그리는 원리는 폭과 높이가 같은 세 개의 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('./eddie.jpg') 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('./eddie.jpg') 50% 50% no-repeat; 
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
23 
    }
    .common:before{
        content:'';
        position: absolute;
        background:url('./eddie.jpg') 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('./eddie.jpg') 50% 50% no-repeat; 
        background-size: auto 220px;
    }
    .common{
        position: absolute;
        height: 100%;
        width: 100%;
        overflow: hidden;
        left:0;
    }
    .common:before{
        content:'';
        position: absolute;
        background:url('./eddie.jpg') 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>

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

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