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>

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

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

PhpStorm 맥 버전

최신(2018.2.1) 전문 PHP 통합 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는