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

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 軸を中心に回転する長方形です。

perspectivetransform: 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ページにビデオを挿入する方法の概要

推薦する

Vue のディスパッチとブロードキャストの自己実装の詳細説明 (ディスパッチとブロードキャスト)

解決すべき問題主にコンポーネント間のクロスレベル通信用なぜディスパッチとブロードキャストを自分で実装...

手の動きをリアルタイムで監視するための Handtrack.js ライブラリ (推奨)

【はじめに】: Handtrack.jsは、ブラウザ上で直接リアルタイムの手の動きの追跡と検出を実...

axios でリクエストをキャンセルし、重複リクエストを防ぐ方法について簡単に説明します。

目次序文コア - キャンセルトークン実用的なアプリケーションとパッケージングいくつかの小さな詳細序文...

SSH接続を介してXshellを使用したUbuntu 20.04で報告されたサービス問題の詳細な説明

1. 最近、Ubuntu の新しいバージョンをインストールしました。/etc/ssh/sshd_co...

ES6スプレッド演算子の使用例

目次スプレッド演算子とレスト演算子とは何ですか?配列スプレッド演算子残り演算子(コレクション関数)ス...

Podmanはコンテナを自動的に起動し、Dockerと比較します

目次1. podmanの紹介2. Dockerと比較した利点3. 互換性4. バックグラウンド サー...

DockerでRedashの中国語版をデプロイしてインストールする方法の詳細な説明

1. インストール手順 Linux 環境でのローカル インストールと比較すると、Docker のイン...

Vueプロジェクトの最適化とパッケージ化の詳細な説明

目次序文1. ルーティングの遅延読み込み1. ルートの遅延読み込みが必要なのはなぜですか? 2. ル...

MySQL の innodb_flush_log_at_trx_commit と sync_binlog を区別する方法

2 つのパラメータ innodb_flush_log_at_trx_commit と sync_bi...

js 属性オブジェクトの hasOwnProperty メソッドの使用

オブジェクトの hasOwnProperty() メソッドは、オブジェクトに特定の独自の (継承され...

MySQLデータベースの管理者パスワードを忘れた場合の解決策

1. コマンド mysqld --skip-grant-tables を入力します (前提条件: m...

MySQL デッドロック ルーチン: 一意のインデックスの下でのバッチ挿入順序の不一致

序文デッドロックの本質はリソースの競合です。バッチ挿入の順序が一貫していないと、デッドロックに陥りや...

MySQLデータベースの基礎知識

目次1. データベースを理解する1.1 データベースとデータ構造の関係1.2 なぜデータベースが必要...

W3C チュートリアル (13): W3C WSDL アクティビティ

Web サービスは、アプリケーション間の通信に関係します。 WSDL は、XML ベースの Web ...

Windows で MySQL 5.7.17 をインストールし、エンコードを utf8 に設定する方法

ダウンロードMySQL 公式ダウンロード、Windows (x86、64 ビット)、ZIP アーカイ...