在 CSS 中画一个 X

Question

我有一个看起来像橙色方块的 div

我想以某种方式在这个 div 中画一个白色的 X，这样它看起来更像

无论如何，在 CSS 中执行此操作还是在 Photoshop 中绘制此图像并将图像用作 div 背景会更容易？ div代码看起来像

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}

原文由 natsuki_2002 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将字母 X 放在 div 内的 HTML 中，然后使用 css 设置样式。

参见 JSFiddle：http: //jsfiddle.net/uSwbN/

HTML:

 <div id="orangeBox">
  <span id="x">X</span>
</div>

CSS：

 #orangeBox {
  background: #f90;
  color: #fff;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
}

原文由 AJT 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您想要一个称为十字标记的实体：

http://www.fileformat.info/info/unicode/char/274c/index.htm

它的代码是 ❌ 它显示为 ❌

如果你想要一个完美居中的十字标记，像这样：

试试下面的 CSS：

 div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
    position: relative;
}

div:after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "\274c"; /* use the hex value here... */
    font-size: 50px;
    color: #FFF;
    line-height: 100px;
    text-align: center;
}

见演示小提琴

跨浏览器问题

十字标记实体不会在 Safari 或 Chrome 中显示。但是，相同的实体在 Firefox、IE 和 Opera 中显示良好。

使用较小但形状相似的乘号实体是安全的， × 显示为×。

原文由 Marc Audet 发布，翻译遵循 CC BY-SA 3.0 许可协议