'How to draw error icon with css only,exactly like in the image

Im trying to do the following x icon, exactly the way it is in here:

enter image description here

So here is the html:

<div class='error-circle'>
    <div>X</div>
</div>

And here is the css:

.error-circle{
    width: 70px;
    height: 70px;
    background: #990000;
    border-radius: 100px;
    border: 4px solid white;
    color: white;
    font-size: 45px;
    font-weight: bold;
    padding-left: 17px;
}

It's close, but i really need the same result as the image (without the background), I think the X should not be the x character but two lines crossed one on the other, How should i achieve this result?

Solution 1:^[1]

A real draw would look like this

enter image description here

*{box-sizing: border-box}
:root{background: #ccc}
div{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    margin: 40px auto;
    box-shadow: 0 0 0 10px white
}

div:before, div:after{
    content: ''; 
    position:absolute;
    width: 20px;
    height: 100px;
    left: 64px;
    top: 25px;
    background: white
}
div:before{
    transform: skew(28deg)
}
div:after{
    transform: skew(-28deg);
}

<div/>

If you want it to look more real add some shadow

*{box-sizing: border-box}
:root{background: #ccc}
div{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    margin: 40px auto;
    box-shadow: 0 0 0 10px white, 0 0 24px 12px #B3B3B3, inset 0 0 16px 1px #B3B3B3;
}

div:before, div:after{
    content: ''; 
    position:absolute;
    width: 20px;
    height: 100px;
    left: 64px;
    top: 25px;
    box-shadow: 0 0 16px 1px #B3B3B3;
    background: white
}
div:before{
    transform: skew(28deg)
}
div:after{
    transform: skew(-28deg);
}

<div/>

The same result with a red background

*{box-sizing: border-box}
:root{background: #ccc}
div{
    background: red;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: relative;
    margin: 40px auto;
    box-shadow: 0 0 0 10px white, 0 0 24px 12px #B3B3B3, inset 0 0 16px 1px #B3B3B3;
}

div:before, div:after{
    content: ''; 
    position:absolute;
    width: 20px;
    height: 100px;
    left: 64px;
    top: 25px;
    box-shadow: 0 0 16px 1px #B3B3B3;
    background: white
}
div:before{
    transform: skew(28deg)
}
div:after{
    transform: skew(-28deg);
}

<div/>

Now you are ready to use transform: scale(.5,.5); on div to have multiple sizes

Solution 2:^[2]

1) Remove padding

2) Change border-radius to 50%

3) Try a different font like verdana

FIDDLE

.error-circle {
  width: 70px;
  height: 70px;
  line-height: 70px;
  background: #990000;
  border-radius: 50%;
  border: 4px solid white;
  color: white;
  font-size: 45px;
  font-family: verdana;
  text-align: center;
}

<div class='error-circle'>
  <div>X</div>
</div>

Solution 3:^[3]

Use border radius as shown below.

body { 
   background-color: #A5A5A5; /* just to help outline the error icon */
   }

 #circlude {
   width: 100px;
   height: 100px;
   background-color: red;
   border-radius: 50%;
   color: white;
   font-weight: bold;
   text-align: center;
   font-size: 72px;
   font-family: calibri; /* Pick the font that works for you */
   line-height: 100px;
   border: solid 4px white;
 }

<div id="circlude"> X </div><!-- End Circlude -->

Solution 4:^[4]

Try this :

.error-circle {
  color: #000;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

Solution 5:^[5]

.error-circle{
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 40px;
    background-color: #990000;
    border: 5px solid #fff;
}

.error-circle > div {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -15px;
    margin-top: -27px;
    text-align: center;
    width: 20px;
    font-size: 48px;
    font-weight: bold;
    color: #fff;
    font-family: Arial;
}

<div class='error-circle'>
    <div>X</div>
</div>

Solution 6:^[6]

I would use pseudo effects with absolute positioning, removing the need for extra elements.

Using Pseudo effects

By making use of the :before and :after pseudo effects, you can make this button without using X:

LIVE DEMO

html{
background-color:gray;
}
.error-circle {
  width:70px;
position:relative;
  height: 70px;
  background: #990000;
  border-radius: 50%;
  border: 4px solid white;
}
.error-circle:after,.error-circle:before {
  position:absolute;
content:'';
width:10%;
left:45%;
top:10%;
height:80%;
background-color:white;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.error-circle:before{      
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

<div class='error-circle'>
  
</div>

by using pseudo effects, it makes editing and management easy:

Example 1 <-- probably the best actually
Example 2

In terms of cross compatibility, you need to ensure you use -webkit- prefix in order for safari to accept the rotate.

Solution 7:^[7]

other answers all solve the circle problem, i want to focus on the X that should be two cross lines.

You can try this for that porpuse (two arrows)

body{padding:20px;}


#arrow-left{
  position: relative;
  padding: 30px;
}

#arrow-left:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 40%;
  background: blue;
  -webkit-transform: skew(135deg, 0deg);
  -moz-transform: skew(135deg, 0deg);
  -ms-transform: skew(135deg, 0deg);
  -o-transform: skew(135deg, 0deg);
  transform: skew(135deg, 0deg);
}
#arrow-left:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: blue;
  -webkit-transform: skew(-135deg, 0deg);
  -moz-transform: skew(-135deg, 0deg);
  -ms-transform: skew(-135deg, 0deg);
  -o-transform: skew(-135deg, 0deg);
  transform: skew(-135deg, 0deg);
}


#arrow-right{
  position: relative;
  padding: 30px;
}

#arrow-right:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0px;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(45deg, 0deg);
  -moz-transform: skew(45deg, 0deg);
  -ms-transform: skew(45deg, 0deg);
  -o-transform: skew(45deg, 0deg);
  transform: skew(45deg, 0deg);
}
#arrow-right:after {
  content: '';
  position: absolute;
  top: 100%;
  right: 60%;
  height: 100%;
  width: 40%;
  background: red;
  -webkit-transform: skew(-45deg, 0deg);
  -moz-transform: skew(-45deg, 0deg);
  -ms-transform: skew(-45deg, 0deg);
  -o-transform: skew(-45deg, 0deg);
  transform: skew(-45deg, 0deg);
}?

<span id="arrow-right"></span>
<span></span>
<span id="arrow-left"></span>

Solution 8:^[8]

You can also use a svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
     viewBox="0 0 256 256" style="enable-background:new 0 0 256 256;" xml:space="preserve">
<title>icon / close / dark</title>
  <desc>Created with Sketch.</desc>
  <g id="icon-_x2F_-close-_x2F_-dark">
    <polygon id="icon-_x2F_-close" points="224.3,0 128,96.3 31.7,0 0,31.7 96.3,128 0,224.3 31.7,256 128,159.7 224.3,256 256,224.3 
        159.7,128 256,31.7  "/>
</g>
</svg>

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
Solution 2
Solution 3
Solution 4	Bindiya Patoliya
Solution 5	kapantzak
Solution 6
Solution 7	faby
Solution 8	Arash MAS

'How to draw error icon with css only,exactly like in the image

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]