CSSを使用して、頻繁に表示される奇妙なボタンを簡単に実装します。

背景

グループでは、CSS を使用してインセットコーナーボタンを実装する方法や、矢印付きのボタンを実装する方法など、関連する質問をする学生もいます。

この記事では、デザイン案によく登場するボタンのうち、CSS で実装するには少々難しくてコツがいるボタンをいくつか取り上げ、それらを CSS で可能な限り実装する方法を説明します。

まず、よく見られるボタンの形状を見てみましょう。

長方形と丸いボタン

通常、ボタンには長方形と丸い形の 2 種類があります。

これらは、幅、高さ、丸い角、背景色など、非常にシンプルです。

 <div class='btn rect'>矩形</div>
    <div class='btn circle'>円</div>

.btn{
    マージン: 8px 自動;
    フレックス収縮: 0;
    幅: 160ピクセル;
    高さ: 64px;
}
.rect {
    背景: #f6ed8d;
}

。丸 {
    境界線の半径: 64px;
    背景: #7de3c8;
}

台形と平行四辺形

次に、長方形の変形に基づいて、台形や平行四辺形のボタンがよく登場します。

これらを実現するには、主にtransformを使用できますが、注意すべき点は、 transformを使用した後、ラベル内のテキストも変形されることです。そのため、通常は要素の疑似要素を使用して形状を実現し、ボタン内のテキストに影響を与えないようにします。

平行四辺形

transform: skewX()を使用するだけです。前述のように、要素の疑似要素を使用して平行四辺形を実現し、内部のテキストに影響を与えないように注意してください。

<div class='btn parallelogram'>平行四辺形</div>

.平行四辺形 {
    位置: 相対的;
    幅: 160ピクセル;
    高さ: 64px;

    ＆：：前に {
        コンテンツ： "";
        位置: 絶対;
        上: 0;
        左: 0;
        下部: 0;
        右: 0;
        背景: #03f463;
        変換: skewX(15deg);
    }
}

疑似要素を使用したくない場合は、 transform: skewX()に加えて、グラデーションを使用して平行四辺形を実現することもできます。

おそらく次のようになります:

{
    背景: linear-gradient(45度、透明22%、#04e6fb 22%、#9006fb 78%、透明0);
}

台形

台形は平行四辺形よりも少し複雑です。台形はperspectiveをより多く利用し、実際に特定の 3D 変換を活用します。原理は、次のように、X 軸を中心に回転する長方形です。

perspectiveとtransform: rotateX()を使用します。もちろん、これらを一緒に記述することもできます。

<div class='btn trapezoid'>台形</div>

.平行四辺形 {
    位置: 相対的;
    幅: 160ピクセル;
    高さ: 64px;

    ＆：：後 {
          コンテンツ："";
          位置: 絶対;
          上: 0; 右: 0; 下: 0; 左: 0;
          変換: 視点(40px) 回転X(10deg);
          変換の原点: 下;
          背景: #ff9800;
    }
}

カットアウェイ - 単色の背景とグラデーションの背景

次は角をカットします。これを実現する最も一般的な方法は、 linear-gradientを使用することです。この図を見てみましょう。

<div></div>

.ノッチング{
    背景: 線形グラデーション(135度、透明10px、#ff1493 0);
    背景繰り返し: 繰り返しなし;
}

結果は以下のとおりです。

これに基づいて、複数のグラデーションを使用して 4 つのグラフィックを実現し、 background-positionを使用して 4 つのコーナーを配置するだけで済みます。

<div class="notching">ノッチング</div>

.ノッチング{
    背景： 
        線形グラデーション(135度、透明10ピクセル、#ff1493 0) 左上、
        linear-gradient(-135度、透明10ピクセル、#ff1493 0) 右上、
        線形グラデーション(-45度、透明10ピクセル、#ff1493 0) 右下、
        linear-gradient(45度、透明10px、#ff1493 0) 左下;
    背景サイズ: 50% 50%;
    背景繰り返し: 繰り返しなし;
}

クリップパスを使用してグラデーション背景カットオフグラフィックを実現する

もちろん、この手法には問題があります。背景色をグラデーションカラーにする必要がある場合、この方法はかなり扱いにくくなります。

幸いなことに、 clip-pathの助けを借りて角の形を切り取る別の方法があります。この方法では、背景色はグラデーションでも単色でも、任意のカスタマイズされた色にすることができます。

<div class="clip-notching">ノッチング</div>

.クリップノッチング{
    背景: 線形グラデーション(
        45度、
        #f9d9e7,
        #ff1493
    );
    クリップパス: ポリゴン(
        15ピクセル0,
        計算(100% - 15px) 0,
        100% 15ピクセル、
        100% 計算(100% - 15px)、
        計算(100% - 15px) 100%、
        15ピクセル 100%、
        0 計算(100% - 15px)、
        0 15ピクセル
    );
}

グラデーション背景を実装するだけです。核となるのは、 clip-path: polygon()を使用して、グラデーションの四角形に基づいて必要な形状 (8 辺の多角形) を切り取ることです。

もちろん、上記のコードは、グラデーションとclip-pathを使用して簡単に取得できる次の六角形と簡単に関連付けることができます。

矢印ボタン

次は矢印ボタンです。上の角切りボタンをよく見てください。両側の角を十分に切り落とすと矢印の形になります。

2 つのグラデーションを使用して、単一の矢印ボタンを作成できます。

<div class="arrow">矢印</div>

&.矢印{
    背景: 線形グラデーション(
                -135度、
                透明 22px、
                #04e6fb 22ピクセル、
                #65ff9a 100%
            ）
            右上、
        線形グラデーション(
                -45度、
                透明 22px、
                #04e6fb 22ピクセル、
                #65ff9a 100%
            ）
            右下;
    背景サイズ: 100% 50%;
    背景繰り返し: 繰り返しなし;
}

矢印が表示されます:

これは、2 つのグラデーションブロックを上下に組み合わせたものです。色を変えるとすぐにわかります。

こんな感じの矢印の形だったらどうでしょうか？

同様に、2 つのグラデーションの重ね合わせでもあり、グラデーションの色は透明 --> 色 A --> 色 B --> 透明となります。もちろん、ここでclip-pathを使用することもできます。

clip-pathソリューションは次のとおりです。

{
    背景: 線形グラデーション(45度, #04e6fb, #65ff9a);
    クリップパス: ポリゴン(
        0 0,
        30ピクセル50%、
        0 100%,
        計算(100% - 30px) 100%、
        100% 50%、
        計算(100% - 30px) 0
    );
}

内接フィレット

クーポンでは、下図のようなボタン形状がよく見られます。最も一般的な解決方法は、グラデーションを使用することです。もちろん、コーナーカットとは異なり、ここで使用されている放射状グラデーションは異なります。

まず、簡単な例を見てみましょう。

<div></div>

div {
    背景画像: 放射状グラデーション(円 100% 100%、透明 0、透明 12px、#2179f5 12px);
}

次のようなグラフが得られます。

したがって、 background-sizeを制御し、4 つのコーナーに次のようなグラフィックを 4 つ実装するだけです。

<div class="inset-circle">インセットサークル</div>

&.インセットサークル{
    背景サイズ: 70% 70%;
    背景画像: 放射状グラデーション(
            100% 100% の円、
            透明 0,
            透明 12px、
            #2179f5 13ピクセル
        ）、
        放射状グラデーション(
            0 0の円、
            透明 0,
            透明 12px、
            #2179f5 13ピクセル
        ）、
        放射状グラデーション(
            100% 0の円、
            透明 0,
            透明 12px、
            #2179f5 13ピクセル
        ）、
        放射状グラデーション(
            0 100%の円、
            透明 0,
            透明 12px、
            #2179f5 13ピクセル
        );
    背景繰り返し: 繰り返しなし;
    背景の位置: 右下、左上、右上、左下;
}

マスクを使用してグラデーションの丸いボタンを実現します

背景色にグラデーションが必要な場合はどうすればよいでしょうか?

長方形の背景パターンがあると仮定すると、 maskを使用してマスクのレイヤーを実装し、 maskの特性を使用して 4 つの角をカバーするだけで済みます。

maskのコードは、上記の丸い角のコードと非常に似ています。簡単な変更で、グラデーションが刻まれた丸い角のボタンを作成できます。

<div class="mask-inset-circle">インセットサークル</div>

.mask-inset-circle {
    背景: 線形グラデーション(45度, #2179f5, #e91e63);
    マスク: 放射状グラデーション(
            100% 100% の円、
            透明 0,
            透明 12px、
            #2179f5 13ピクセル
        ）、
        放射状グラデーション(
            0 0の円、
            透明 0,
            透明 12px、
            #2179f5 13ピクセル
        ）、
        放射状グラデーション(
            100% 0の円、
            透明 0,
            透明 12px、
            #2179f5 13ピクセル
        ）、
        放射状グラデーション(
            0 100%の円、
            透明 0,
            透明 12px、
            #2179f5 13ピクセル
        );
    マスク繰り返し: 繰り返しなし;
    マスク位置: 右下、左上、右上、左下;
    マスクサイズ: 70% 70%;
}

このようにして、次のようなグラフが得られます。

もちろん、上記のコードを理解するには、まず CSS maskプロパティの原理を理解する必要があります。まだよくわからない場合は、私の記事を参照してください。

魔法の CSS マスク

不規則な角丸長方形

次のボタンの形状も、最近最もよく聞かれる質問です。まずはその形状を見てみましょう。

名前を付けるのは簡単ではありません。片側は角が丸い直角で、もう片側は角が丸い斜角です。

実際、これは角丸長方形 + 角丸平行四辺形で構成されています。

したがって、2 つの疑似要素の助けを借りて、簡単に実装できます。

<div class="skew">スキュー</div>

.skew {
    位置: 相対的;
    幅: 120ピクセル;

    ＆：：後 {
        コンテンツ： "";
        位置: 絶対;
        上: 0;
        左: 0;
        右: 0;
        下部: 0;
        境界線の半径: 10px;
        背景: オレンジ;
        変換: skewX(15deg);
    }
    ＆：：前に {
        コンテンツ： "";
        位置: 絶対;
        上: 0;
        右: -13px;
        幅: 100ピクセル;
        高さ: 64px;
        境界線の半径: 10px;
        背景: オレンジ;
    }
}

1 つの疑似要素が別の疑似要素に重ね合わされるため、1 つにはグラデーションが使用され、もう 1 つには単色が使用されます。これらの色は完全に接続できるため、グラデーションカラーグラフィックを実現できます。

丸い角のボタン

次のボタンの形状は、Chrome のページングと同様に、タブページでよく見られます。

ボタンの形状を分解してみましょう。実際には 3 つのピースが積み重なっています。

両側に円弧三角形を実現する方法を考え出す必要があります。ここでもグラデーション（放射状グラデーション）を使用します。実際は次のようになります。下の図に示すように、2 つの疑似要素を使用して、黒い部分を透明に置き換えるだけです。

コードは次のとおりです。

<div class="outside-circle">外側の円</div>

.外側の円 {
    位置: 相対的;
    背景: #e91e63;
    境界線の半径: 10px 10px 0 0;

    ＆：：前に {
        コンテンツ： "";
        位置: 絶対;
        幅: 20px;
        高さ: 20px;
        左: -20px;
        下部: 0;
        背景: #000;
        background:radial-gradient(0 0の円、透明20px、#e91e63 21px);
    }
    ＆：：後 {
        コンテンツ： "";
        位置: 絶対;
        幅: 20px;
        高さ: 20px;
        右: -20px;
        下部: 0;
        背景: #000;
        background:radial-gradient(円 100% 0、透明 20px、#e91e63 21px);
    }
}

以下が入手できます:

上記のすべてのグラフィックの完全なコードは、こちらでご覧いただけます: CodePen デモ - CSS さまざまなボタンの形状 | CSS さまざまなボタンの形状

総括する

上記の実装に基づいて、スプライシング、手品、マスキングなどの方法によって、いくつかの少し特殊なボタンが実装されていることに気付くのは難しくありません。

そしてその中には:

グラデーション (線形グラデーションlinear-gradient 、放射状グラデーションradial-gradient 、複数のグラデーション)
mask
クリッピングclip-path
transform

これらは重要な役割を果たします。これらを上手に使用すれば、これらのグラフィックスを簡単に処理し、その変形に容易に対処できるようになります。

上記のグラフィックをfilter: drop-shadow()と組み合わせると、基本的に不規則な影を実現できます。

さらに、より複雑なグラフを以下に示します。

絵を切りましょう。CSS は良いですが、実際の使用では入出力比も考慮する必要があります。

やっと

この記事の目的は、簡単なマニュアルを提供することです。実際には、上記の効果を達成するためのより良い方法があるかもしれません。この記事ではそれらを一つ一つ列挙するわけではありません。追加または修正していただいて構いません。

さて、この記事はこれで終わりです。この記事が皆さんのお役に立てば幸いです。

素晴らしい CSS 技術記事が私の Github -- iCSS に集められています。これらは継続的に更新されています。星をクリックして購読し、収集してください。

ご質問やご提案がございましたら、お気軽にご連絡ください。これはオリジナルの記事であり、私の文章力には限界があります。記事に誤りがある場合はお知らせください。

よく見かける変な形のボタンをCSSで簡単に実装する方法についての記事はこれで終わりです。CSSの変な形のボタンに関する関連コンテンツについては、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

<<: MySQLのさまざまなロックに関する詳細な理解

>>: HTMLページにビデオを挿入する方法の概要