CSS3 で Transform skewX を使用して、平行四辺形のナビゲーション メニューを実装する方法

この記事の内容は、css3 での変形 skewX を使用して、平行四辺形のナビゲーション メニューを実装する方法に関するものです。必要な方は参考にしていただければ幸いです。

平行四辺形は、実際には長方形のスーパーセットです。その辺はペアで平行ですが、角は必ずしも直角であるとは限りません。ビジュアル デザインでは、平行四辺形は動きの感覚を伝えることがよくあります。
CSSを使ってボタンのような平行四辺形のリンクを作成してみましょう。出発点は通常のブロック ボタンで、いくつかの単純なスタイルで補完されます。次に、skew() の変形プロパティを使用して、長方形を斜めに引き伸ばすことができます。 ただし、これにより、コンテンツも歪んでしまいます。横向きだと見苦しくて読みにくいです。中身はそのままに、コンテナの形状だけを傾ける方法はありますか？

多くの人は、ネストされた要素のソリューションを思い浮かべるでしょう。その後、コンテンツに別の reverse skew() 変形を適用して、コンテナの変形効果を相殺し、最終的に期待する結果を生み出すことができます。残念ながら、これは、スパンなどのコンテンツをラップするために HTML 要素の追加レイヤーを使用する必要があることを意味します。

transform: skewX(-45deg);

ご覧のとおり、このメソッドは非常にうまく機能しますが、また、さらに HTML 要素を追加する必要があります。構造レイヤーへの変更が許可されていない場合、または構造レイヤーの純度を厳密に維持したい場合でも、心配する必要はありません。純粋な CSS ソリューションもあります。

疑似要素の解決策

別のアイデアは、すべてのスタイル (背景、境界線など) を疑似要素に適用してから、疑似要素を変換することです。コンテンツは擬似要素に含まれていないため、コンテンツは変換の影響を受けません。この手法で以前と同じリンク スタイルを取得できるかどうかを見てみましょう。

ホスト要素の寸法がそのコンテンツによって決定される場合でも、擬似要素の柔軟性を維持し、ホスト要素の寸法を自動的に継承できるようにしたいと考えています。簡単な解決策は、ホスト要素にposition:relativeスタイルを適用し、擬似要素にposition:absoluteを設定し、すべてのオフセットをゼロに設定して、水平方向と垂直方向の両方のサイズに拡張することです。コードは次のようになります。

<a href="m.sbmmt.com" class="button">
 <span>m.sbmmt.com</span>
</a>
.button { transform: skewX(-45deg); }
.button > span { transform: skewX(45deg); }

このとき、疑似要素で生成された正方形はコンテンツに重なり、背景が設定されると、コンテンツが覆われます。この問題を解決するには、擬似要素に z-index: -1 スタイルを設定して、そのスタッキング レベルがホスト要素の後ろにプッシュされるようにします。ここで私たちがしなければならない最後のステップは、必要に応じてモーフィングし、美しい結果を楽しむことです。コードの最終バージョンは次のとおりで、生成される視覚効果は上記の手法とまったく同じです。

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
}

この手法は skew() 変形に役立つだけでなく、あらゆるものに適用できます。他の変形スタイル。コンテンツを変形せずに要素を変形したい場合に使用できます。たとえば、このテクニックをrotate()変形スタイルに少し調整して正方形の要素に使用すると、簡単にひし形の形状を取得できます。

この手法の重要な点は、擬似要素と位置決め属性を使用してボックスを生成し、擬似要素のスタイルを設定してホスト要素の下に配置することです。このアイデアは他のシーンでも使用して、さまざまな効果を実現できます。

以上がCSS3 で Transform skewX を使用して、平行四辺形のナビゲーション メニューを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。