在CSS中画一个X

本文介绍了在CSS中画一个X的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I've got a div that looks like a orange square

我想以某种方式在此div中绘制白色X，以便使其看起来更像

I'd like to draw a white X in this div somehow so that it looks more like

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

Anyway to do this in CSS or is it going to be easier to just draw this in Photoshop and use the image as the div background? The div code just looks like

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

推荐答案

您只需输入字母

请参见JSFiddle：

See 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;
}

这篇关于在CSS中画一个X的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！