ホームページ > 記事 > ウェブフロントエンド > ラダータブページを実装するCSSメソッド

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

小云云オリジナル: 2017-12-05 15:47:581861ブラウズ

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

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

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

.p{
    position: relative;
    display: inline-block;
    padding: .5em 1em .35em;
    color: white;
}
.p::before{
    content: &#39;&#39;; /*用伪元素来生成一个矩形*/
    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を使用しない結果です

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

<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: &#39;&#39;;
    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メソッド

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

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

関連記事