html - 如何只用css绘制错误图标，和图片一模一样

Question

我正在尝试执行以下 x 图标，完全按照此处的方式:

这是 html:

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

这是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;
}

它很接近，但我确实需要与图像相同的结果(没有背景)，我认为 X 不应该是 x 字符，而是两条线相互交叉，我应该如何实现这个结果？

Answer 1

1) 去除填充

2) 将 border-radius 改为 50%

3) 尝试使用不同的字体，例如 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>