'checkmark/tick inside a circle (icon) using pure css3

I'm trying to draw a circle with tick/checkmark inside it using pure css3

.success-checkmark {
    content: '✔';
    position: absolute;
    left:0; top: 2px;
    width: 17px; height: 17px;
    border: 1px solid #aaa;
    background: #f8f8f8;
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3)

}

How can i achieve i have tried with the above code?

css


Solution 1:[1]

You can use content: '?'; only on pseudo elements, so try using the following selector: 

    .success-checkmark:after {
      content: '?';
      position: absolute;
      left:0; top: 2px;
      width: 20px; 
      height: 20px;
      text-align: center;
      border: 1px solid #aaa;
      background: #f8f8f8;
      border-radius: 50%;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
    }
<div class="success-checkmark"></div>

Solution 2:[2]

I found a template online to which I made modifications. Kindly check if this works for you.

:root {
  --borderWidth: 7px;
  --height: 25px;
  --width: 12px;
  --borderColor: white;
}

body {
  padding: 20px;
  text-align: center;
}

.check {
  display: inline-block;
  transform: rotate(45deg);
  height: var(--height);
  width: var(--width);
  border-bottom: var(--borderWidth) solid var(--borderColor);
  border-right: var(--borderWidth) solid var(--borderColor);
}

.behind {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background: black;
}
<div class="behind">
  <div class="check">
  </div>
</div>

Solution 3:[3]

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.circle {
  position: relative;
  background: #00B01D;
  border-radius: 100%;
  height: 120px;
  width: 120px;
}

.checkMark {
  position: absolute;
  transform: rotate(50deg) translate(-50%, -50%);
  left: 27%;
  top: 43%;
  height: 60px;
  width: 25px;
  border-bottom: 5px solid #fff;
  border-right: 5px solid #fff;
}
<div class="wrapper">
  <div class="circle">
    <div class="checkMark"></div>
  </div>
</div>

Solution 4:[4]

css

   .success-checkmark:after {
      content: '?';
      position: absolute;
      text-align: center;
      line-height:20px;
      }

vertical adjustment

 line-height:20px;<--- adjust vertical alignment
      


.success-checkmark:after {
      content: '?';
      position: absolute;
      text-align: center;
      line-height:20px;
      
      width: 90px; 
      height: 90px;
      border: 1px solid #aaa;
      background: #f8f8f8;
      border-radius: 50%;
      box-shadow: inset 0 1px 3px rgba(0,0,0,.3)
    }
<div class="success-checkmark"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Roy Bogado
Solution 2 Jyotirmay Dash
Solution 3 Md. Jahid Hossain
Solution 4 ßãlãjî

Related Questions