How to draw a checkmark tick using CSS

Question

How to draw the tick symbol using CSS  The symbols I find using Unicode isn t aesthetically-pleasing   EDIT Icon fonts are a great suggestion  I was looking for something like this

User · Answer

Also  using the awesome font  you can use the following tag  Simple and beautiful With the possibility of changing the size and color and other features in CSS  See result here

User · Answer

An additional solution  for when you only have one of the  before    after psuedo-elements available  is described here   after-Checkbox using borders   It basically uses the border-bottom and border-right properties to create the checkbox  and then rotates the mirrored L using transform  Example   x000D   x000D  li   x000D    position  relative     necessary for positioning the  after    x000D    x000D   x000D  li done   x000D    list-style  none     remove normal bullet for done items    x000D    x000D   x000D  li done after   x000D    content      x000D    background-color  transparent  x000D     x000D       position the checkbox    x000D    position  absolute  x000D    left  -16px  x000D    top  0px  x000D   x000D       setting the checkbox    x000D         short arm    x000D    width  5px  x000D    border-bottom  3px solid  4D7C2A  x000D         long arm    x000D    height  11px  x000D    border-right  3px solid  4D7C2A  x000D     x000D       rotate the mirrored L to make it a checkbox    x000D    transform  rotate 45deg   x000D      -o-transform  rotate 45deg   x000D      -ms-transform  rotate 45deg   x000D      -webkit-transform  rotate 45deg   x000D    x000D  To do  x000D   lt ul gt  x000D     lt li class  done  gt Great stuff lt  li gt  x000D     lt li class  done  gt Easy stuff lt  li gt  x000D     lt li gt Difficult stuff lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

i like this way because you don t need to create two components just one    checkmark after       opacity  1      height  4em      width  2em      -webkit-transform-origin  left top      transform-origin  left top      border-right  2px solid  5cb85c      border-top  2px solid  5cb85c      content          left  2em      top  4em      position  absolute      Animation from Scott Galloway Pen

User · Answer

only css  quite simple I find it     x000D   x000D   checkmark   x000D        display  inline-block  x000D        transform  rotate 45deg   x000D        height  25px  x000D        width  12px  x000D        margin-left  60    x000D        border-bottom  7px solid  78b13f  x000D        border-right  7px solid  78b13f  x000D        x000D   lt div class  checkmark  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can draw two rectangles and place them next to each other  And then rotate by 45 degrees  Modify the width height top left parameters for any variation   DEMO 1   DEMO 2  With circle   HTML   lt span class  checkmark  gt       lt div class  checkmark stem  gt  lt  div gt       lt div class  checkmark kick  gt  lt  div gt   lt  span gt    CSS   checkmark       display inline-block      width  22px      height 22px      -ms-transform  rotate 45deg      IE 9        -webkit-transform  rotate 45deg      Chrome  Safari  Opera        transform  rotate 45deg       checkmark stem       position  absolute      width 3px      height 9px      background-color  ccc      left 11px      top 6px      checkmark kick       position  absolute      width 3px      height 3px      background-color  ccc      left 8px      top 12px

User · Answer

You can now include web fonts and even shrink down the file size with just the glyphs you need  https   github com fontello fontello http   fontello com   li before     content   add icon symbol here      font-family   my cool web icon font here     display inline-block    vertical-align  top    line-height  1em    width  1em    height 1em    margin-right  0 3em    text-align  center    color   999

User · Answer

I ve used something similar to BM2ilabs s answer in the past to style the tick in checkboxes  This technique uses only a single pseudo element so it preserves the semantic HTML and there is no reason for additional HTML elements    x000D   x000D  label   x000D    cursor  pointer  x000D    x000D   x000D  input type  checkbox     x000D    position  relative  x000D    top  2px  x000D    box-sizing  content-box  x000D    width  14px  x000D    height  14px  x000D    margin  0 5px 0 0  x000D    cursor  pointer  x000D    -webkit-appearance  none  x000D    border-radius  2px  x000D    background-color   fff  x000D    border  1px solid  b7b7b7  x000D    x000D   x000D  input type  checkbox   before   x000D    content      x000D    display  block  x000D    x000D   x000D  input type  checkbox   checked before   x000D    width  4px  x000D    height  9px  x000D    margin  0px 4px  x000D    border-bottom  2px solid  115c80  x000D    border-right  2px solid  115c80  x000D    transform  rotate 45deg   x000D    x000D   lt label gt  x000D     lt input type  checkbox  name  check-1  value  Label  gt Label x000D   lt  label gt  x000D   x000D   x000D

User · Answer

I suggest to use a tick symbol not draw it  Or use webfonts which are free for example  fontello dot com You can than replace the tick symbol with a web font glyph   Lists  ul  padding  0   li  list-style  none  li before     display inline-block    vertical-align  top    line-height  1em    width  1em    height 1em    margin-right  0 3em    text-align  center    content         color   999      See here  http   jsfiddle net hpmW7 3   Checkboxes  You even have web fonts with tick symbol glyphs and CSS 3 animations  For IE8 you would need to apply a polyfill since it does not understand  checked   input type  checkbox       clip  rect 1px  1px  1px  1px     left  -9999px    position  absolute  important    label before  input type  checkbox   checked   label before     content       display inline-block    vertical-align  top    line-height  1em    border  1px solid  999    border-radius  0 3em    width  1em    height 1em    margin-right  0 3em    text-align  center    input type  checkbox   checked   label before     content         color  green      See the JS fiddle  http   jsfiddle net VzvFE 37

User · Answer

Try this     html example   lt span gt  amp  10003  lt  span gt       css example  span     content    2713

User · Answer

Do some transforms with the letter L   x000D   x000D   checkmark   x000D    font-family  arial  x000D    -ms-transform  scaleX -1  rotate -35deg      IE 9    x000D    -webkit-transform  scaleX -1  rotate -35deg      Chrome  Safari  Opera    x000D    transform  scaleX -1  rotate -35deg   x000D    x000D   lt div class  checkmark  gt L lt  div gt  x000D   x000D   x000D

User · Answer

After some changing to above Henry s answer  I got a tick with in a circle  I came here looking for that  so adding my code here   x000D   x000D   snackbar circle     background-color   f0f0f0    border-radius  13px    padding  0 5px      checkmark     font-family  arial    font-weight  bold    -ms-transform  scaleX -1  rotate -35deg     -webkit-transform  scaleX -1  rotate -35deg     transform  scaleX -1  rotate -35deg     color   63BA3D    display  inline-block    x000D   lt span class  snackbar circle  gt      lt span class  checkmark  gt L lt  span gt   lt  span gt  x000D   x000D   x000D

User · Answer

li before       content          height  5px      background-color  green      position  relative      display  block      top  50       left  50       width  9px      margin-left  -15px      -ms-transform  rotate 45deg       -webkit-transform  rotate 45deg       transform  rotate 45deg     li after       content          height  5px      background-color  green      position  relative      display  block      top  50       left  50       width  20px      margin-left  -11px      margin-top  -6px      -ms-transform  rotate -45deg       -webkit-transform  rotate -45deg       transform  rotate -45deg

User · Answer

This is simple css for Sign Mark   ul li after opacity  1 content    2713  right  20px position  absolute font-size  20px font-weight  bold

User · Answer

You might want to try fontawesome io   It has great collection of icons  For you  lt i class  fa fa-check  aria-hidden  true  gt  lt  i gt  should work  There are many check icons in this too  Hope it helps

User · Answer

Here is another CSS solution  its take less line of code   ul li before  content   2713     display inline-block    color red    padding 0 6px 0 0      ul li list-style-type none font-size 1em     lt ul gt       lt li gt test1 lt  li gt       lt li gt test lt  li gt   lt  ul gt    Here is the Demo link http   jsbin com keliguqi 1

[css] How to draw a checkmark / tick using CSS?

Examples related to css

Examples related to drawing

Examples related to css-shapes