How to create a tickmark inside circle in css-CodePudding

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.

CodePudding user response：

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 ></div>

CodePudding user response：

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

< => <

> => >

/ => /

# => #

.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,");
  background-size: 20px;
  background-position: center; 
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

<div ></div>