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

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フロントエンドパッケージングの詳細なプロセス

推薦する

Linux での MySQL のインストールに関するチュートリアル

目次1. 古いバージョンを削除する2. サーバーのカーネルタイプを確認し、適切なバージョンをダウンロ...

CSS で垂直方向の中央揃えを行う 7 つの方法の詳細なコード例

レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平セン...

nginx でネストされた if メソッドを実装する方法

Nginx はネストされた if ステートメントをサポートしておらず、if ステートメントでの論理判...

MySQL におけるデータベース間関連クエリメソッド

ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...

この記事では、VUE の複数の DIV とボタン バインディングの Enter イベントを実装する方法を説明します。

現在、OK ボタンをクリックしたときやキーボードの Enter キーを押したときに操作を実行するとい...

Mysql 5.6.37 winx64 インストール デュアル バージョン mysql ノート

マシンに MySQL バージョン 5.0 がすでに存在する場合は、最新バージョンの MySQL のイ...

CSS で美しい時計アニメーション効果を実装するためのサンプルコード

仕事を探しています!!!事前準備:まず、このアニメーションは、以前のローディングアニメーションとクー...

WeChatアプレットにナンバープレート入力機能を実装

目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...

docker イメージのプル速度が遅い問題の解決策

現在、Docker には中国向けの公式ミラーがあります。詳細については、https://www.do...

JavaScript 文字列の一般的なメソッドの詳細な説明

目次1. キャラクター文法パラメータ索引戻り値2. 連結文法パラメータ文字列2 [, …文字列N]戻...

Mysql の mysql.user ユーザー テーブルの詳細な説明

MySQL は、異なるユーザーに異なる権限を割り当てることができるマルチユーザー管理データベースであ...

Angularの親子コンポーネント通信の詳細な説明

目次使用されるAPI簡単な例人.ts親コンポーネントサブコンポーネント効果要約する使用されるAPI ...

JavaScript クリップボードの使用法の詳細な説明

(1)はじめに: clipboard.js は、テキストをクリップボードにコピーする機能を実装する軽...

MySQLにおけるビューの作成(CREATE VIEW)と使用制限の詳しい説明

この記事では、例を使用して、MySQL ビューの作成 (CREATE VIEW) と使用上の制限につ...

MYSQL SERVER のログファイルを縮小する方法

トランザクション ログには、関連するデータベースに対する操作が記録され、データベースの回復に関連する...