How to create a tickmark inside circle in css

Question

I have the following css for tickmark.

.Icon{
display: inline block;
height: 58px;
width: 29px;
border-bottom: 10px solid blue;
border-right: 10px solid blue;
transform: rotate(45deg);
border-radius: 8px;
}

I am trying to get tickmark with background circle. And learn in the process.

Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Reproducible Example**](http://stackoverflow.com/help/reprex) — Paulie_D, Jul 08 '22 at 16:08
Experiment with adding a before pseudo element which has a background color and border-radius of 50% and which sits behind the actual element. — A Haworth, Jul 08 '22 at 20:33

score 1 · Answer 1 · answered Jul 08 '22 at 16:23

There are several approaches to achieving this effect (including CSS and SVG) but one of the most straightforward and portable is to combine a dash of CSS with the unicode character U+2713:

✓

In CSS, you can include extended unicode characters inside ::before and ::after pseudo-elements, using the format:

content: '\2713'

Working Example:

.tick-within-circle {
  position: relative;
  width: 48px;
  height: 48px;
  line-height: 50px;
  text-align: center;
  font-size: 44px;
  font-weight: 900;
  border: 8px solid rgb(0, 0, 255);
  border-radius: 50%;
}

.tick-within-circle::before {
  content: '\2713';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="tick-within-circle"></div>

score 0 · Answer 2 · answered Jul 08 '22 at 16:44

You can use Inline SVG in CSS. By doing so you can customize it's color, size and position. But for that to work SVG content be url-escaped.

Here's URL-escaped characters I used in snippet below

< => %3C

> => %3E

/ => %2F

# => %23

.tickmark-circle {
  position: relative;
  width: 35px;
  height: 35px;
  background-color: #db4437;
  border-radius: 50%;
}

.tickmark-circle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='%23fff' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round' class='css-i6dzq1' viewBox='0 0 24 24'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 20px;
  background-position: center; 
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

<div class="tickmark-circle"></div>

score 0 · Answer 3 · answered Jul 08 '22 at 21:03

Here are some ideas using just CSS.

This snippet takes your tick drawn using CSS and puts it into an after pseudo element on the element which has the Icon class. It introduces a before pseudo element which has the circular background color.

The pseudo elements are positioned at the end of a div.

This is all just for illustration, it depends on exactly how you want to use it whether you'd have the tick part in an actual element or attached as a pseudo element as here.

A CSS variable is used to describe the width of the left part of the tick itself and CSS calculations used after that to size the background etc. Again it all depends on what you want the final result to both look like and be used for as to whether you alter these settings or not.

.Icon {
  display: inline-block;
  position: relative;
  overflow: visible;
  --w: 29px;
  font-size: calc(2 * var(--w));
}

.Icon::after {
  content: '';
  height: calc(2 * var(--w));
  width: var(--w);
  border-bottom: 10px solid blue;
  border-right: 10px solid blue;
  transform: rotate(45deg);
  border-radius: 8px;
  position: absolute;
  padding: 10px;
  box-sizing: border-box;
  left: calc(100% + var(--w));
}

.Icon::before {
  content: '';
  height: calc(var(--w) * 3);
  aspect-ratio: 1 / 1;
  background-color: cyan;
  background-repeat: no-repeat;
  background-size: 200% auto;
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
  z-index: -1;
}

<div class="Icon">Correct&nbsp;</div>

How to create a tickmark inside circle in css

3 Answers3

✓