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

推薦する

MYSQL スロークエリとログ設定とテスト

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

MySQLデータベースを使い始めるための最初のステップはテーブルを作成することです

データベースを作成する右クリック - 新しいデータベースを作成ライブラリ名を入力し、文字セットと並べ...

Linux 仮想ホストで SourceGuardian (sg11) 暗号化コンポーネントを有効にする詳細な手順

注: sg11 弊社では Linux システム仮想ホストのセルフインストールのみサポートしております...

Linux ファイル操作でよく使われるコマンドのまとめ

0. 新しい操作: mkdir abc #新しいフォルダを作成 touch abc.sh #新しいフ...

UbuntuのVimにNERDTreeプラグインをインストールする詳細な手順

NERDTree は Vim 用のファイル システム ブラウザーです。このプラグインを使用すると、ユ...

計算機機能を実現するjsバージョン

この記事の例では、計算機機能を実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...

ブラウザがクロージャをどのように認識するかについて詳しく説明します

目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...

VueはExcelテーブルをインポートし、インポートに失敗したデータを自動的にダウンロードします。

次のような要件があります: インポート ボタン。ボタンをクリックして Excel テーブルをインポー...

MySQL の準同期レプリケーションについての簡単な説明

導入MySQL はレプリケーションを通じてストレージ システムの高可用性を実現します。現在、MySQ...

Linux LVM 論理ボリューム構成プロセス (作成、増加、削減、削除、アンインストール) の詳細な説明

Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...

WeChatアプレットにおけるデータ保存実装方法

目次グローバル変数 globalDataページプライベート変数データストレージ非同期ストレージ(デバ...

Linux ファイルシステムの説明: ext4 以降

今日は、ext3 や他の以前のファイル システムとの違いを含め、ext4 の歴史について説明します。...

html mailto(メール)の実用化について

ご存知のとおり、mailto は Web デザインと制作において非常に実用的な HTML タグです。...

MySQL タイムブラインドインジェクションの 5 つの遅延方法

MySQL タイム ブラインド インジェクションの 5 つの遅延方法 (PWNHUB の予期しない解...