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

Question

Im trying to do the following x icon, exactly the way it is in 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?

Answer 1

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>