How to draw an error icon only css, exactly the same as in the image

Question

I am trying to make the following x icon, exactly as it is 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 is close, but I really need the same result as the image (no background), I think that X should not be the symbol x, but two lines intersect one another. How do I achieve this result?

Answer 1

A real draw will look like

 *{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 a 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/> 

Same result with 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 a div to have several sizes

Answer 2

1) Remove the gasket

2) Change the border radius to 50%

3) Try using a different font, for example 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> 

Answer 3

Use the 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 --> 

Answer 4

Try the following:

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

Answer 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> 

Answer 6

I would use pseudo-effects with absolute positioning, eliminating the need for additional elements.

---

Using pseudo effects

---

Using the previous 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> 

---

Using pseudo-effects, simplifies editing and management:

• Example 1 <- probably the best one actually
• Example 2

---

In terms of cross-compatibility, you need to make sure that you use the -webkit- prefix -webkit- that the safari -webkit- rotation.

Answer 7

the other answers all solve the circle problem, I want to focus on X, which should be two transverse lines.

You can try this for this breed (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>