テキストの配置を完璧に保ちながら CSS 要素を傾けるにはどうすればよいですか?

テキストの配置を維持した要素の傾斜

CSS では、テキストの配置を維持しながら要素を傾斜させることができます。このテクニックは、下の図に示すように、斜めの境界線を持つメニュー ボタンを作成する場合に特に便利です。

この効果を実現するには、次の手順に従います。

1. 親を傾ける要素: 変換を適用: skew();
2. 子要素を逆スキュー: 変換を適用します: skew(-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 中国語 Web サイトの他の関連記事を参照してください。