텍스트를 기울이지 않은 채로 컨테이너를 기울이는 방법은 무엇입니까?

요소를 기울이되 텍스트를 보통으로 유지하는 방법(기울어지지 않음)

비뚤어지지 않은 텍스트로 기울어진 버튼 만들기

만들려면 기울어지지 않은 텍스트가 있는 기울어진 요소의 경우 상위 요소와 하위 요소 모두에 변형을 적용할 수 있습니다. 요소:

상위 요소 기울이기:

Transform: Skew() 속성을 사용하여 상위 요소(이 경우

요소)를 기울입니다. .

아이 꼬추 풀기 요소:

변환: 기울이기(-angle)를 사용하여 하위 요소( 요소)에 반대 변환을 적용합니다. 여기서 각도는 상위 요소에 적용된 값과 동일합니다. 이렇게 하면 텍스트가 왜곡되지 않습니다.

예제 코드:

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;
}

HTML:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

결과:

이렇게 하면 다음이 생성됩니다. 버튼이 기울어져 있지만 텍스트가 기울어지지 않은 메뉴로 인해 링크의 가독성을 왜곡하지 않고 각도 효과를 얻을 수 있습니다.

위 내용은 텍스트를 기울이지 않은 채로 컨테이너를 기울이는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!