ホームページ > 記事 > ウェブフロントエンド > CSSで台形タブを作成する方法

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

php中世界最好的语言オリジナル: 2018-03-21 13:15:141971ブラウズ

今回は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 を介して効果を比較して表示できます。ここでは、著者が両方の結果を示しています:

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

これは、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;
}

によって生成されたレンダリングは次のようになります:

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