CSS を使用して簡単なチェック マーク効果を実現する
Dec 31, 2020 am 09:50 AM
css
通常、これを実装するには 2 つのアイデアがあります。1 つは既製のシンボルをページに挿入することであり、もう 1 つは CSS を使用して実装することです。
(学習ビデオ共有: css ビデオ チュートリアル)
この記事では主に 2 番目のアイデアを紹介します:
ブロックへlevel 要素の幅と高さを設定します
要素の 2 つの隣接する境界線を設定します
要素を回転します
HTML
<div class="check-style-unequal-width"></div>
ログイン後にコピー
分析:
ここではブロックレベルの要素を使用する必要があります
いいえ要素の内容を設定する必要があります
CSS
.check-style-unequal-width { width: 8px; height: 16px; border-color: #009933; border-style: solid; border-width: 0 3px 5px 0; transform: rotate(45deg); }
ログイン後にコピー
分析:
-
長方形の効果を得るには幅と高さを設定します。四角形にはコンテンツがありません
隣接する境界線のスタイルを設定し、チェック マークの概要を取得します
回転属性を使用してチェック マークを正常に取得
ランニング効果
分析:
図に示すように上図では、1 つ目は同じ幅の 2 本の線のチェックマーク効果、2 つ目は不等幅の 2 本の線のチェックマーク効果、3 つ目は同じ幅と長さの 2 本の線のチェックマーク効果です。
注:
行レベルの要素の幅と高さを直接設定しても意味がありません。ブロック レベルの要素になるように表示を設定する必要があります。 。例: この例に適用するには、span で表示を inline-block に設定する必要があります
- #実際のニーズに応じて要素の幅と高さを調整できます
- はい、実際のニーズに応じて異なる境界線を設定し、隣接する境界線の幅も設定します。 ## この効果には簡単な変更を加えることができ、これは擬似要素に適用されます。前後。 ::before & ::after
- ##関連する推奨事項: CSS チュートリアル
# を参照してください。
以上がCSS を使用して簡単なチェック マーク効果を実現するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD

人気の記事
R.E.P.O.説明されたエネルギー結晶と彼らが何をするか(黄色のクリスタル)
1週間前
By 尊渡假赌尊渡假赌尊渡假赌
レポ:チームメイトを復活させる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
ハローキティアイランドアドベンチャー:巨大な種を手に入れる方法
3週間前
By 尊渡假赌尊渡假赌尊渡假赌
スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか?
3週間前
By DDD

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック
Gmailメールのログイン入り口はどこですか?
7306
9


Java チュートリアル
1623
14


CakePHP チュートリアル
1344
46


Laravel チュートリアル
1259
25


PHP チュートリアル
1207
29

