CSSで台形タブを作成する方法

今回はCSSで台形のタブページを作る方法と、CSSで台形のタブページを作るための注意点を紹介します。実際の事例を見てみましょう。

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

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

<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>Home</a>
    <a>Projects</a>
    <a>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 のプロパティを左、右、左下、左右などに変更して、さまざまな効果を確認できます。効果:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS3 でのポインターイベントの使用の詳細な説明

CSS を完全に使用して要素のセンタリングを実現する

focus-within の使用の詳細な説明

シームレスなカルーセル広告を作成する CSS3

以上がCSSで台形タブを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。