CSS を使用してチェックマーク/目盛りを描画する方法

” を持つコンテナ要素 ID 」または「 クラス 」：

< 分周 ID = 'チェックマーク' >< / 分周 >

上記の HTML ステートメントでは、「 分周 ” 要素が追加され、id は “ として宣言されました チェックマーク 」。

CSS プロパティを使用して要素のスタイルを設定するときに、「 ID 」 セレクターを使用して HTML 要素を参照し、その中のプロパティを指定します。

---

---

＃チェックマーク
{
変換: 回転 ( 45度 ) ;
身長 : 45px;
幅 : 20px;
左マージン: 50 %;
border-bottom: 9px 単色の darkolivegreen;
border-right: 9px 単色の darkolivegreen;
}

上記の CSS スタイル要素には、次のプロパティがあります。

• 「 変形：回転（45度） 」は、目盛り記号の形になるように、垂直および水平の直線を回転させます。
• 「 身長 」プロパティは、目盛り記号の高さを「 45px 」。
• 「 幅 「プロパティはシンボルを作成します」 20px ' 幅。
• 「 左マージン 」 プロパティは、目盛り記号を Web ページ インターフェイスの中央に揃えます。
• その後、「 ボーダーボトム ' と ' ボーダーライト 」プロパティは、両方の線の境界線の太さを「 9px 」を定義し、「 ダークオリーブグリーン 完全なティック シンボルを作成する両方の線の色。

これにより、Web ページ インターフェイスの中央に表示される緑色のシンプルなチェック マークまたはチェック マークが作成されます。 45px 「高くて」 20px ' 幅：

方法 2: Unicode 文字を使用してチェックマーク/チェックマークを挿入する

また、スタイル設定やパラメーター値の定義を行わなくても、出力に目盛り記号を自動的に挿入する Unicode 文字もあります。たとえば、Unicode 文字「 U+2713 」は、出力に単純な目盛り記号を追加するのに役立ちます。同様に、Unicode 文字「 U+2713 」は、白い太い目盛り記号を出力に挿入するのに役立ちます。完全なガイドを通じてこれらの Unicode 文字を HTML ドキュメントに追加する方法を学習するには、クリックしてください。 ここ .

結論

最初に ID またはクラスを含む HTML 要素を作成し、次に CSS スタイル要素に ID またはクラス セレクターを追加してその要素を参照することにより、チェック マークまたはチェック マークを描画できます。 Web ページ インターフェイスでチェック マーク/目盛りの形状を作成するには、「 身長 」、「 幅 」、「 回転する ' と ' 色 」は、チェックマークの種類や大きさに合わせて使い分けることができます。このブログでは、CSS を使用してチェックマーク/目盛りを描画する方法を示します。