텍스트 정렬을 완벽하게 유지하면서 CSS 요소를 어떻게 기울일 수 있습니까?

텍스트 정렬을 보존하여 요소 기울이기

CSS에서는 텍스트 정렬을 유지하면서 요소를 기울일 수 있습니다. 이 기술은 아래 이미지에서 볼 수 있듯이 대각선 테두리가 있는 메뉴 버튼을 만들 때 특히 유용합니다.

이 효과를 얻으려면 다음 단계를 따르세요.

1. 상위를 기울이기 요소: 변환 적용: 왜곡(); 특정 각도로 기울이기 위해 상위 요소(예: 이 예에서는 li)에 연결합니다.
2. 하위 요소 반전 반전: 변환 적용: 왜곡(-angle); 기울어짐을 반전시키고 텍스트 정렬을 복원하기 위해 하위 요소(예: 이 예에서는 a)에 추가합니다.

다음은 예제 코드입니다.

nav ul {
  padding: 0;
  display: flex;
  list-style: none;
}
nav li {
  transition: background 0.3s, color 0.3s;
  transform: skew(20deg); /* SKEW */
}

nav li a {
  display: block; /* block or inline-block is needed */
  text-decoration: none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* UNSKEW */
  color: inherit;
}

nav li.active,
nav li:hover {
  background: #000;
  color: #fff;
}

이 코드는 메뉴를 생성합니다. 비뚤어진 버튼과 대각선 테두리가 있습니다. 버튼 위로 마우스를 가져가면 버튼이 검은색으로 바뀌고 텍스트 색상이 흰색으로 바뀌면서 역기울기 효과가 나타납니다.

이 기술을 이해하면 대각선 테두리가 있는 시각적으로 매력적인 메뉴 요소를 만들고 완벽한 텍스트 정렬을 유지할 수 있습니다.

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