我有一个看起来像橙色方 block 的 div
我想以某种方式在这个 div 中画一个白色的 X,这样它看起来更像
无论如何,在 CSS 中执行此操作还是在 Photoshop 中绘制此操作并将图像用作 div 背景会更容易? div代码看起来像
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
最佳答案
您需要一个称为十字标记的实体:
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 中显示良好。
使用较小但形状相似的乘号实体 ×
是安全的,它显示为 ×。
关于html - 在 CSS 中画一个 X,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18920542/