Html 如何仅使用css绘制错误图标，与图像中完全相同

我正在尝试按此处的方式制作以下x图标：

下面是html：

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

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

试试这个：

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

1） 除去填充物

2） 将边界半径更改为50%

3） 尝试不同的字体，如verdana

。错误圈{
宽度：70px；
高度：70像素；
线高：70px；
背景：99万；
边界半径：50%；
边框：4倍纯白；
颜色：白色；
字体大小：45px；
字体系列：verdana；
文本对齐：居中；
}

X

使用边界半径，如下所示

body{
背景色：#a5a5；/*仅用于帮助勾勒错误图标的轮廓*/
}
#圈{
宽度：100px；
高度：100px；
背景色：红色；
边界半径：50%；
颜色：白色；
字体大小：粗体；
文本对齐：居中；
字体大小：72px；
字体系列：calibri；/*选择适合您的字体*/
线高：100px；
边框：实心4px白色；
}

X

。错误圈{
位置：相对位置；
宽度：70px；
高度：70像素；
边界半径：40px；
背景色：#990000；
边框：5px实心#fff；
}
.error circle>div{
位置：绝对位置；
最高：50%；
左：50%；
左边距：-15px；
利润上限：-27px；
文本对齐：居中；
宽度：20px；
字体大小：48px；
字体大小：粗体；
颜色：#fff；
字体系列：Arial；
}

X

我将使用带有绝对定位的伪效果，消除对额外元素的需要

---

使用伪效果

---

通过使用：before和：after伪效果，您可以在不使用X的情况下创建此按钮：

html{
背景颜色：灰色；
}
.误差圆{
宽度：70px；
位置：相对位置；
高度：70像素；
背景：99万；
边界半径：50%；
边框：4倍纯白；
}
.错误圈：之后，.错误圈：之前{
位置：绝对位置；
内容：''；
宽度：10%；
左：45%；
排名前10%；
身高：80%；
背景色：白色；
-webkit变换：旋转（-45度）；
变换：旋转（-45度）；
}
.错误圆圈：在{
-webkit变换：旋转（45度）；
变换：旋转（45度）；
}

---

其他答案都解决了圆的问题，我想把重点放在应该是两条交叉线的X上

你可以试试这个（两个箭头）

body{padding:20px；}
#向左箭头{
位置：相对位置；
填充：30px；
}
#向左箭头：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：40%；
背景：蓝色；
-webkit变换：倾斜（135度，0度）；
-moz变换：倾斜（135度，0度）；
-ms变换：倾斜（135度，0度）；
-o变换：倾斜（135度，0度）；
变换：倾斜（135度，0度）；
}
#向左箭头：之后{
内容：''；
位置：绝对位置；
最高：100%；
右：60%；
身高：100%；
宽度：40%；
背景：蓝色；
-webkit变换：倾斜（-135度，0度）；
-moz变换：倾斜（-135度，0度）；
-ms变换：倾斜（-135度，0度）；
-o变换：倾斜（-135度，0度）；
变换：倾斜（-135度，0度）；
}
#向右箭头{
位置：相对位置；
填充：30px；
}
#向右箭头：之前{
内容：''；
位置：绝对位置；
排名：0；
左：0px；
身高：100%；
宽度：40%；
背景：红色；
-webkit变换：倾斜（45度，0度）；
-moz变换：倾斜（45度，0度）；
-ms变换：倾斜（45度，0度）；
-o变换：倾斜（45度，0度）；
变换：倾斜（45度，0度）；
}
#向右箭头：之后{
内容：''；
位置：绝对位置；
最高：100%；
右：60%；
身高：100%；
宽度：40%；
背景：红色；
-webkit变换：倾斜（-45度，0度）；
-moz变换：倾斜（-45度，0度）；
-ms变换：倾斜（-45度，0度）；
-o变换：倾斜（-45度，0度）；
变换：倾斜（-45度，0度）；
}​
真正的绘图应该是这样的



*{框大小：边框框}
：root{背景：#ccc}
div{
宽度：150px；
高度：150像素；
边界半径：50%；
位置：相对位置；
利润率：40px自动；
长方体阴影：0 10px白色
}
div:before，div:after{
内容：''；
位置：绝对位置；
宽度：20px；
高度：100px；
左：64px；
顶部：25px；
背景：白色
}
部门：以前{
变换：倾斜（28度）
}
部门：之后{
变换：倾斜（-28度）；
}
不要忘记将
线高度
等于
高度
，以强制垂直居中。
边框半径
为
100%
是不必要的，因为浏览器会将其重新渲染为
50%
，因为
50%
是它所能容纳的最高值。@SleekGeek:@jbutler483注意。这是最接近的一个：宽度：70px；高度：73px；背景色：#990000；边界半径：100%；颜色：白色；字体大小：粗体；文本对齐：居中；字体大小：54px；字体系列：calibri；边框：3倍纯白；查看我的更新（因为它不使用X字符）。它还大量使用了伪效果，在移动safari中没有正确显示。看起来这是由于
rotate
@nochkin:mobileSafari的哪个版本？应该没事吧？（我无法测试，因为我没有访问/使用它的权限。）
caniuse.com
网站显示，
transform
仅在使用
-webkit-
前缀时有效。我只是想把它添加到你的代码中，它在MobileSafari上起了作用。
.error-circle {
  color: #000;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}