CSS 평행사변형 및 마름모 변환
- 高洛峰원래의
- 2016-11-30 16:01:242140검색
*다음 기술은 모두 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>
그러나 콘텐츠 기울기는 우리가 원하는 효과가 아닐 수 있습니다. 일반적인 해결책은 내부 레이어에 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: '';
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>
이는 왜곡된 콘텐츠 문제를 해결할 뿐만 아니라 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>
꽤 정팔각형인데, 제품 관리자를 설득할 수 있으면 작업이 완료된 것입니다. 글쎄, 당신은 확신할 수 없을 것 같아요. . .
여기에서는 회전 방향이 일관되지 않기 때문에 외부 div가 초과된 부분을 가로채고(overflow:hidden 참고) 그 일부는 비어 있습니다. 빈 부분을 채우면 마름모가 됩니다. 여기서 스케치를 그리고 피타고라스 정리를 사용하여 계산할 수 있습니다.
계산 결과 1.42배로 확대되어 완전히 채워졌다는 것입니다. img의 변환 속성을 다음과 같이 변경했습니다. 즉, 원본 사진이 정사각형이 아닌 경우 더 큰 배율을 사용해야 하며 캡처된 사진 내용이 더 제한됩니다.
그리고 계획 자체가 단순하고 우아하지는 않습니다. 여기에서는 고정된 위치 지점을 전달하여 그림을 어떤 다각형으로든 잘라낼 수 있는 클립 경로 속성(불행히도 지원이 좋지 않은 것 같습니다)을 소개합니다. 
<!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>