Use css to achieve a simple check mark effect

Generally we have two ideas to implement it, one is to insert ready-made symbols into the page, and the other is to use css to implement it.

(Learning video sharing: css video tutorial)

This article mainly introduces the second idea:

• To the block level Set the width and height of the element

• Set the two adjacent borders of the element

• Rotate the element

HTML

<div class="check-style-unequal-width"></div>

Analysis:

• You need to use block-level elements here

• No need to set element content

CSS

.check-style-unequal-width {
 
    width: 8px;
 
    height: 16px;
 
    border-color: #009933;
 
    border-style: solid;
 
    border-width: 0 3px 5px 0;
 
    transform: rotate(45deg);
 
}

Analysis:

• Set the width and height to get a rectangular effect, and there is no content in the rectangle

• Set the style of the adjacent border and get the general outline of the check mark

• Use the rotation attribute to successfully get the check mark

Running effect

Analysis:

As shown in the picture above, the first one is a check mark effect with two lines of equal width, and the second one is The checkmark effect of two lines with unequal width; the third one is the checkmark effect of two lines of equal width and length.

Note:

• It is useless to directly set the width and height of row-level elements. You need to set its display to make it a block-level element. For example: span needs to set the display to inline-block to be applicable to this example

• You can adjust the element width and height according to actual needs

• Yes Set different borders according to actual needs, as well as the width of adjacent borders

• You can make simple modifications to this effect, which applies to pseudo elements::before and ::after. You can refer to ::before & ::after

##Related recommendations:

CSS tutorial

The above is the detailed content of Use css to achieve a simple check mark effect. For more information, please follow other related articles on the PHP Chinese website!