CSSでチェックマーク効果を実現する方法

チェック マーク効果を実現するには、既製の記号を使用し、インターネット上で √ を直接検索し、それをページに挿入することが 1 つのアイデアです。もう 1 つのアイデアは、CSS を使用してこの記事を紹介することです。アイデアは次のとおりです:

(関連する推奨事項: css ビデオ チュートリアル )

ブロック レベルの幅と高さを設定する要素

要素の 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 本の線のチェック マーク効果です。詳細な実装については、ソースコードを確認してください。

注:

行レベル要素の幅と高さを直接設定しても意味がありません。ブロック レベル要素になるように表示を設定する必要があります。例: この例に適するように、スパンは表示をインラインブロックに設定する必要があります。

実際のニーズに応じて要素の幅と高さを調整できます。

異なる境界線や隣接する境界線を設定できます。実際のニーズに応じた境界線

の幅は、疑似要素 ::before および ::after に作用して、この効果のために簡単に変更できます。 ::before & ::after

推奨チュートリアル: CSS チュートリアル

を参照してください。

以上がCSSでチェックマーク効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。