CSS를 사용하여 텍스트를 수평으로 정렬하면서 요소의 배경을 어떻게 기울일 수 있습니까?

텍스트 정렬을 유지하면서 기울어진 요소 만들기

CSS 영역에서 특정 시각 효과를 얻으려면 혁신적인 사고가 필요합니다. 그러한 효과 중 하나는 포함된 텍스트를 왜곡하지 않고 기울어진 요소를 만드는 것입니다.

메뉴 항목 위로 마우스를 가져가면 갈색 배경이 대각선으로 나타나는 아래 이미지를 복제한다고 상상해 보십시오.

[ 흰색 텍스트가 있는 기울어진 갈색 메뉴 항목 이미지]

이를 달성하려면 기울이기와 역 기울이기를 조합하여 활용할 수 있습니다. 핵심은 상위 요소(이 경우 li)에skew()를 적용하고 해당 하위 요소(앵커 태그, a)에skew(-deg)를 적용하는 데 있습니다. 이렇게 하면 기울어짐이 취소되어 배경이 기울어져 있는 동안 텍스트가 수평으로 유지됩니다.

관련 CSS는 다음과 같습니다.

nav li {
  transform: skew(20deg);
}

nav li a {
  transform: skew(-20deg);
}

또한 마우스 오버 상태를 추가하여 배경 색상을 변경할 수 있습니다. 사용자가 메뉴 항목 위로 마우스를 가져갈 때의 텍스트 색상:

nav li:hover {
  background: #1a0000;
  color: #fff;
}

이러한 CSS 기술을 결합하면 시각적으로 매력적인 기울어진 디자인을 만들 수 있습니다. 적절한 텍스트 정렬을 유지하면서 요소를 사용하세요.

위 내용은 CSS를 사용하여 텍스트를 수평으로 정렬하면서 요소의 배경을 어떻게 기울일 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!