CSS はラダータブページを実装します

Web デザインでは、台形タブ ページは非常に一般的な形式ですが、台形は実装が難しいスタイルです。以下に、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 はラダータブページを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。