テキストを歪めずにコンテナを歪ませるにはどうすればよいですか?

要素を傾けてテキストを通常のままにする方法 (傾きなし)

傾いていないテキストで傾いたボタンを作成する

作成するには傾いていないテキストを持つ傾いた要素の場合、両方の親に変換を適用できます。および子要素:

親要素の傾斜:

transform: skew() プロパティを使用して、親要素を傾斜させます (この場合、

要素).

子の歪みを解除する要素:

transform: skew(-angle) を使用して、子要素 ( 要素) に逆の変換を適用します。ここで、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 中国語 Web サイトの他の関連記事を参照してください。