CSS で div 凹角スタイルを実装するサンプルコード

通常の開発では、凸型の丸い角、つまり border-radius 属性を使用するのが一般的です。凹角がある場合、一般的に 2 つの実装方法を検討します。 1 つは背景画像を直接使用し、もう 1 つは CSS を使用する方法です。

使用されるプロパティは、radial-gradient と組み合わせた background または background-image です。例：

背景画像: 放射状グラデーション(200px at 50px 0px, #fff 50px, #4169E1 50px);

放射状グラデーションの場合、制御するパラメーターは主に 3 つあります。

1つは起源と大きさです。サイズは border-radius と同様です。原点は at で表され、点の座標を指定するか、left、right、top、bottom で指定します。

次は2つの色と透明度、サイズなどです。ここで 50px またはパーセンテージですが、最初のものをテストしたところ、50 のみが半角丸で、2 番目の 50px はほとんど効果がないようです。

例：

写真のような薄緑色の凹角スタイルを実現するための素材画像はありません。

開始: まず、この div の幅と高さを設定し、相対的な位置を設定します。次に、その中に絶対位置に配置された 4 つの要素を配置し、幅と高さを凹部のサイズと同じに設定してから、絶対位置を指定して 4 つの角に固定します。次に、上記の凹型スタイルを使用します。

上の 2 つは完成が非常に簡単ですが、下の 2 つのコーナーは、位置と凹の位置を設定するだけで、次のようになります。

これには別の回転が必要です。

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

CS: ...

.notice_box_cls #共通通知 {
    背景色: #E8F7F2;
    パディング: 20px 10px;
}
.notice_box_cls .notice_body0 {
    位置: 相対的;
}
.notice_box_cls .notice_body {
    background:radial-gradient(左上15px、#fff 50px、#E8F7F2 50%);
    位置: 絶対;
    左: 0;
    上: 0;
    幅: 15px;
    高さ: 15px;
}
.notice_box_cls .notice_body1 {
    background:radial-gradient(右上15px、#fff 50px、#E8F7F2 50%);
    位置: 絶対;
    右: 0;
    上: 0;
    幅: 15px;
    高さ: 15px;
}
.notice_box_cls .notice_body2 {
    background:radial-gradient(右下15px、#fff 50px、#E8F7F2 50%);
    位置: 絶対;
    左: 0;
    下部: 0;
    幅: 15px;
    高さ: 15px;
    変換: 回転(90度);
}
.notice_box_cls .notice_body3 {
    background:radial-gradient(左下15px、#fff 50px、#E8F7F2 50%);
    位置: 絶対;
    右: 0;
    下部: 0;
    幅: 15px;
    高さ: 15px;
    変換: 回転(270度);
}

html:

<div class="notice">
                                    <divクラス="">
                                        <div class="notice_title">
                                            <span>お知らせとお知らせ</span>
                                        </div>
                                        <div class="notice_body0">
                                            <ul id="commonNotice">
                                                <!-- <li><a href="#" class="fl">湖北省教育情報化 S1</a><i class="fr">2017-5-13</i></li>
                                            <li><a href="#" class="fl">湖北省教育情報化 S2</a><i class="fr">2017-5-13</i></li>
                                            <li><a href="#" class="fl">湖北省教育情報化 S3</a><i class="fr">2017-5-13</i></li>
                                            <li><a href="#" class="fl">湖北省教育情報化 S4</a><i class="fr">2017-5-13</i></li>
                                            <li><a href="#" class="fl">湖北省教育情報化 S5</a><i class="fr">2017-5-13</i></li>
                                            <li><a href="#" class="fl">湖北省教育情報化 S6</a><i class="fr">2017-5-13</i></li> -->
                                            </ul>
                                            <div class="notice_body">
                                            </div>
                                            <div class="notice_body1">
                                            </div>
                                            <div class="notice_body2">
                                            </div>
                                            <div class="notice_body3">
                                            </div>
                                        </div>
                                    </div>
                                  </div>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<: ウェブページの読みやすさを向上させるいくつかの方法

>>: Vueフロントエンドパッケージングの詳細なプロセス