평행사변형 탐색 메뉴를 구현하기 위해 CSS3에서 SkewX 변환을 사용하는 방법

이 글의 내용은 CSS3에서 변형 SkewX를 사용하여 평행사변형 탐색 메뉴를 구현하는 방법에 대한 내용입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

평행사변형은 실제로 직사각형의 상위 집합입니다. 측면이 쌍으로 평행하지만 각도가 반드시 직각일 필요는 없습니다. 시각적 디자인에서 평행사변형은 종종 움직임의 느낌을 전달할 수 있습니다.
CSS를 사용하여 버튼 모양의 평행사변형 링크를 만들어 보겠습니다. 우리의 시작점은 몇 가지 간단한 스타일로 보완된 일반 블록 버튼입니다. 그런 다음 왜곡()의 변형 속성을 사용하여 직사각형을 대각선으로 늘릴 수 있습니다.

transform: skewX(-45deg);

그러나 이로 인해 콘텐츠도 경사 왜곡이 발생합니다. 보기 흉하고 읽기 어렵다. 내용물은 그대로 유지하면서 용기의 모양만 기울일 수 있는 방법이 있나요?

많은 사람들이 중첩된 요소 솔루션을 생각할 것이고, 컨테이너의 변형 효과를 상쇄하기 위해 콘텐츠에 또 다른 역방향 왜곡() 변형을 적용하고 최종적으로 기대하는 결과를 얻을 수 있습니다. 불행하게도 이는 콘텐츠를 래핑하기 위해 스팬과 같은 HTML 요소의 추가 레이어를 사용해야 함을 의미합니다.

<a href="www.php.cn" class="button">
 <span>www.php.cn</span>
</a>
.button { transform: skewX(-45deg); }
.button > span { transform: skewX(45deg); }

보시다시피 이 방법은 매우 잘 수행되지만 추가 항목을 추가해야 함을 의미합니다. HTML 요소. 구조 레이어에 대한 변경이 허용되지 않거나 구조 레이어의 순수성을 엄격하게 유지하려는 경우 걱정하지 마십시오. 순수한 CSS 솔루션도 있습니다.

의사 요소 솔루션

또 다른 아이디어는 모든 스타일(배경, 테두리 등)을 의사 요소에 적용한 다음 의사 요소를 변환하는 것입니다. 콘텐츠가 의사 요소에 포함되어 있지 않기 때문에 콘텐츠는 변환의 영향을 받지 않습니다. 이 기술이 이전과 동일한 링크 스타일을 얻을 수 있는지 살펴보겠습니다.

우리는 의사 요소가 유연성을 유지하고 호스트 요소의 크기가 해당 내용에 따라 결정되는 경우에도 호스트 요소의 크기를 자동으로 상속하기를 원합니다. 간단한 해결책은 호스트 요소에 position:relative 스타일을 적용하고 pseudo 요소에 position:absolute를 설정한 다음 모든 오프셋을 0으로 설정하여 호스트 요소에 가로 및 세로 크기로 늘이는 것입니다. 코드는 다음과 같습니다.

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
}

이 시점에서 의사 요소로 생성된 상자는 콘텐츠와 겹쳐집니다. 배경이 설정되면 콘텐츠가 덮이게 됩니다. 이 문제를 해결하기 위해 의사 요소에 대해 z-index: -1 스타일을 설정하여 스택 수준이 호스트 요소 뒤에 푸시되도록 할 수 있습니다. 이제 우리가 해야 할 마지막 단계는 원하는 만큼 변형하고 아름다운 결과를 즐기는 것입니다. 코드의 최종 버전은 다음과 같으며, 이것이 생성하는 시각적 효과는 위에서 언급한 기술과 정확히 동일합니다.

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: ''; /* 用伪元素来生成一个矩形 */
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -1;
 background: #58a;
 transform: skew(45deg);
}

이 기술은 Skew() 변형에 유용할 뿐만 아니라 다른 변형 스타일에도 적용됩니다. 콘텐츠를 변환하지 않고 요소를 변환할 때 사용할 수 있습니다. 예를 들어 이 기술을 회전() 변형 스타일로 약간 조정한 다음 사각형 요소에 사용하면 쉽게 다이아몬드 모양을 얻을 수 있습니다.

이 기술의 핵심은 의사 요소와 위치 지정 속성을 사용하여 상자를 생성한 다음 의사 요소의 스타일을 지정하고 호스트 요소 아래에 배치한다는 것입니다. 이 아이디어는 다른 장면에서도 다양한 효과를 얻기 위해 사용될 수 있습니다.

위 내용은 평행사변형 탐색 메뉴를 구현하기 위해 CSS3에서 SkewX 변환을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!