CSS 평행사변형 및 마름모 변환-CSS 튜토리얼-php.cn

CSS 평행사변형 및 마름모 변환

高洛峰

풀어 주다： 2016-11-30 16:01:24

원래의

2206명이 탐색했습니다.

*다음 기술은 모두 Lea Verou가 작성한 "CSS Secrets"에서 파생되었습니다.

평행사변형

평행사변형의 구성은 스큐의 변형 속성을 통해 직사각형을 기준으로 대각선으로 그릴 수 있습니다. () 리프트 투 겟(스큐에 사용되는 좌표계, 세로축은 X축, 가로축은 Y축으로 공통좌표계와 반대).

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .button{
             color: white;
             background-color: #51bfff;
             width: 120px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             transform: skewX(-45deg);
         }
    </style>
</head>
<body>
    <div class="location button">click</div>
</body>
</html>

로그인 후 복사

CSS 평행사변형 및 마름모 변환

그러나 콘텐츠 기울기는 우리가 원하는 효과가 아닐 수 있습니다. 일반적인 해결책은 내부 레이어에 div를 중첩한 다음 반대 방향을 추가하는 것입니다. -up 변환: SkewX(45deg); 그러나 코드 히스테리를 가진 사람들은 그것을 받아들일 수 없다고 말했습니다.

또 다른 아이디어는 모든 스타일을 의사 요소에 적용하는 것입니다. 그런 다음 의사 요소를 변환합니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .button{
             width: 120px;
             height: 50px;
             line-height: 50px;
             text-align: center;
             color: white;
         }
        .button:before{
            content: &#39;&#39;;
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
            background-color: #51bfff;
            transform: skewX(-45deg);
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="location button">click</div>
</body>
</html>

로그인 후 복사

CSS 평행사변형 및 마름모 변환

이는 왜곡된 콘텐츠 문제를 해결할 뿐만 아니라 HTML 구조도 여전히 이전처럼 깔끔합니다. 단, 의사 요소에 의해 생성된 패턴은 콘텐츠와 겹치므로 배경이 설정되면 콘텐츠를 덮게 되므로 z-index: -1을 추가해야 합니다.

다이아몬드 그림

정사각형을 기준으로 한다면 다이아몬드는 45도 회전한 정사각형 무늬입니다. 외부 div를 45도 회전한 다음 내부 img를 반대 방향으로 45도 회전시키는 것을 생각하기 쉽습니다. 다음과 같은 패턴이 얻어집니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
         .picture{
             width: 600px;
             transform: rotate(45deg);
             overflow: hidden;
         }
        .picture>img{
            max-width: 100%;
            transform: rotate(-45deg);
        }
    </style>
</head>
<body>
    <div class="location picture"><img  src="1.jpeg" alt="CSS 평행사변형 및 마름모 변환" ></div>
</body>
</html>

로그인 후 복사

CSS 평행사변형 및 마름모 변환

꽤 정팔각형인데, 제품 관리자를 설득할 수 있으면 작업이 완료된 것입니다. 글쎄, 당신은 확신할 수 없을 것 같아요. . .

여기에서는 회전 방향이 일관되지 않기 때문에 외부 div가 초과된 부분을 가로채고(overflow:hidden 참고) 그 일부는 비어 있습니다. 빈 부분을 채우면 마름모가 됩니다. 여기서 스케치를 그리고 피타고라스 정리를 사용하여 계산할 수 있습니다.

계산 결과 1.42배로 확대되어 완전히 채워졌다는 것입니다. img의 변환 속성을 다음과 같이 변경했습니다. 즉, 원본 사진이 정사각형이 아닌 경우 더 큰 배율을 사용해야 하며 캡처된 사진 내용이 더 제한됩니다.

그리고 계획 자체가 단순하고 우아하지는 않습니다. 여기에서는 고정된 위치 지점을 전달하여 그림을 어떤 다각형으로든 잘라낼 수 있는 클립 경로 속성(불행히도 지원이 좋지 않은 것 같습니다)을 소개합니다. CSS 평행사변형 및 마름모 변환

가까운 시일 내에 다양한 브라우저에서 클립 경로 속성이 더 잘 지원되기를 바랍니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .location{
            position: relative;
            top: 150px;
            left: 150px;
        }
        .picture{
            -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            -moz-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            transition: 1s clip-path;
        }

    </style>
</head>
<body>
<img  class="location picture" src="1.jpeg" alt="CSS 평행사변형 및 마름모 변환" >
</body>
</html>

로그인 후 복사