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

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

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

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

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

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

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

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

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

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

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

<div></div>

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

<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%;
    背景繰り返し: 繰り返しなし;
} 

<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ピクセル
    );
}

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

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

{
    背景: 線形グラデーション(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);
}

<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ピクセル
        );
    背景繰り返し: 繰り返しなし;
    背景の位置: 右下、左上、右上、左下;
} 

<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%;
}

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

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

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

<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);
    }
}