ラダータブページを実装するCSSメソッド

Web デザインでは、台形タブは非常に一般的な形式ですが、台形は実装が難しいスタイルです。多くの開発者は台形の背景画像を直接使用して効果を生成しますが、背景画像を使用すると追加の http リクエストが作成され、あまり理想的な方法ではありません。ここで著者は、CSS を直接使用して台形効果を実現する方法を紹介します。

単純な p を例に挙げます。

<p class="p">这是一个梯形</p>

.p{
    position: relative;
    display: inline-block;
    padding: .5em 1em .35em;
    color: white;
}
.p::before{
    content: ''; /*用伪元素来生成一个矩形*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #58a;
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}

要素ノードを直接 3D 変形すると、要素内のコンテンツも変形されます。は望ましくない効果であるため、ここでは疑似要素を使用し、その疑似要素に変形効果を適用して理想的な効果を実現します。ここでは、変形時に底部を固定し、その高さが変化するため、scaleY(1.3)来补足它在高度上的缩水。读者可以去掉scaleY(1.3)和transform-origin を通じて効果を比較して表示できます。ここでは、作者が両方の結果を示しています。はscaleYとtransform-originを使用しない結果です

これは上記のコードによって生成されたスタイルの結果です台形ラベルが生成されたので、さらに複数のラベルページを生成できます。ここで著者が示す簡単な例を見てみましょう。 。

<nav>
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">About</a>
</nav>

nav>a{
    position: relative;
    display: inline-block;
    padding: .3em 1em 0;
}
nav>a::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #ccc;
    background-image: linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0));
    border: 1px solid rgba(0,0,0,.4);
    border-bottom: none;
    border-radius: .5em .5em 0 0;
    transform: perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}

レンダリングは次のようになります:

リーダーは、transform-origin の属性を左、右、左下、左右などに変更できます。さまざまなエフェクトを表示します。ここではいくつかのエフェクトを紹介します:

ページの方法、皆様のお役に立てれば幸いです。

関連する推奨事項:

CSS を使用して簡単なアニメーション効果を実現する

HTML+CSS を使用してアニメーション効果を実現する

CSS を使用して複数列レイアウトを実装する方法

以上がラダータブページを実装するCSSメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。