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 サイトの他の関連記事を参照してください。