Html 在 CSS 中绘制一个 X
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18920542/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Draw an X in CSS
提问by natsuki_2002
I've got a div that looks like a orange square
我有一个看起来像橙色方块的 div
I'd like to draw a white X in this div somehow so that it looks more like
我想以某种方式在这个 div 中画一个白色的 X 使它看起来更像
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
无论如何要在 CSS 中执行此操作，还是仅在 Photoshop 中绘制它并将图像用作 div 背景会更容易？div 代码看起来像
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
采纳答案by AT92
You could just put the letter X in the HTML inside the div and then style it with css.
您可以将字母 X 放在 div 内的 HTML 中，然后使用 css 对其进行样式设置。
See JSFiddle: http://jsfiddle.net/uSwbN/
见 JSFiddle：http: //jsfiddle.net/uSwbN/
HTML:
HTML：
<div id="orangeBox">
<span id="x">X</span>
</div>
CSS:
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;
}
回答by Marc Audet
You want an entity known as a cross mark:
您需要一个称为十字标记的实体：
http://www.fileformat.info/info/unicode/char/274c/index.htm
http://www.fileformat.info/info/unicode/char/274c/index.htm
The code for it is ❌and it displays like ❌
它的代码是❌，它显示为 ❌
If you want a perfectly centered cross mark, like this:
如果你想要一个完美居中的十字标记，像这样：
try the following CSS:
尝试以下 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: "4c"; /* use the hex value here... */
font-size: 50px;
color: #FFF;
line-height: 100px;
text-align: center;
}
Cross-Browser Issue
跨浏览器问题
The cross-mark entity does not display with Safari or Chrome. However, the same entity displays well in Firefox, IE and Opera.
交叉标记实体不会在 Safari 或 Chrome 中显示。但是，相同的实体在 Firefox、IE 和 Opera 中显示良好。
It is safe to use the smaller but similarly shaped multiplication sign entity, ×which displays as ×.
使用较小但形状相似的乘号实体是安全的，×它显示为 ×。
回答by Gildas.Tambo
single element solution:
单元素解决方案：
body{
background:blue;
}
div{
width:40px;
height:40px;
background-color:red;
position:relative;
border-radius:6px;
box-shadow:2px 2px 4px 0 white;
}
div:before,div:after{
content:'';
position:absolute;
width:36px;
height:4px;
background-color:white;
border-radius:2px;
top:16px;
box-shadow:0 0 2px 0 #ccc;
}
div:before{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
left:2px;
}
div:after{
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
right:2px;
}<div></div>回答by Neurotransmitter
Yet another pure CSSsolution (i.e. without the use of images, characters or additional fonts), based on @Bansoa is the answer's answer .
另一个基于@Bansoa 的纯 CSS解决方案（即不使用图像、字符或其他字体）是答案的答案。
I've simplified it and added a bit of Flexboxmagic to make it responsive.
我已经对其进行了简化并添加了一些Flexbox魔法以使其具有响应性。
Cross in this example automatically scales to any square container, and to change the thickness of its lines one have just to tune height: 4px;(to make a cross truly responsive, you may want to set the heightin percents or other relative units).
在这个例子中，Cross 自动缩放到任何方形容器，并改变它的线条的粗细，只需调整height: 4px;（为了使一个 cross真正响应，您可能需要设置height百分比或其他相关单位）。
div {
position: relative;
height: 150px; /* this can be anything */
width: 150px; /* ...but maintain 1:1 aspect ratio */
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid pink; /* not required, added for better visibility */
}
div::before,
div::after {
position: absolute;
content: '';
width: 100%;
height: 4px; /* cross thickness */
background-color: black;
}
div::before {
transform: rotate(45deg);
}
div::after {
transform: rotate(-45deg);
}<div></div>回答by Gray
Yet another attempt... this one uses ×. A lot of the examples on this page only show for me as a box, but ×works
又一次尝试……这个使用×。这个页面上的很多例子只对我显示为一个盒子，但×有效
HTML
HTML
<div class="close"></div>
CSS
CSS
.close {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
.close:after {
position:relative;
content:"\d7";
font-size:177px;
color:white;
font-weight:bold;
top:-53px;
left:-2px
}
回答by JasonWoof
You can make a pretty nice X with CSS gradients:
你可以用 CSS 渐变制作一个非常漂亮的 X：
demo: https://codepen.io/JasonWoof/pen/rZyRKR
演示：https: //codepen.io/JasonWoof/pen/rZyRKR
code:
代码：
<span class="close-x"></span>
<style>
.close-x {
display: inline-block;
width: 20px;
height: 20px;
border: 7px solid #f56b00;
background:
linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
linear-gradient(135deg, #f56b00 0%,#f56b00 43%,#fff 45%,#fff 55%,#f56b00 57%,#f56b00 100%);
}
</style>
回答by António Regadas
You can use the CSS property "content":
您可以使用 CSS 属性“内容”：
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
div:after {
content: "X";
font-size: 2em;
color: #FFF;
}
Like this: http://jsfiddle.net/HKtFV/
回答by António Regadas
#x{
width: 20px;
height: 20px;
background-color:orange;
position:relative;
border-radius:2px;
}
#x::after,#x::before{
position:absolute;
top:9px;
left:0px;
content:'';
display:block;
width:20px;
height:2px;
background-color:red;
}
#x::after{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#x::before{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}<div id=x>
</div>回答by Explosion Pills
You could do this by styling an "x"
你可以通过样式“x”来做到这一点
text-align: center;
font-size: 120px;
line-height: 100px;
color: white;
font-family: monospace;
回答by Ryan
I love this question! You could easily adapt my code below to be a white × on an orange square:
我喜欢这个问题！您可以轻松地将我下面的代码调整为橙色方块上的白色 ×：
Demo fiddle here
演示小提琴在这里
Here is the SCSS (which could easily be converted to CSS):
这是 SCSS（可以很容易地转换为 CSS）：
$pFontSize: 18px;
p {
font-size: $pFontSize;
}
span{
font-weight: bold;
}
.x-overlay,
.x-emoji-overlay {
position: relative;
}
.x-overlay,
.x-emoji-overlay {
&:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: red;
text-align: center;
}
}
.x-overlay:after {
content: '\d7';
font-size: 3 * $pFontSize;
line-height: $pFontSize;
opacity: 0.7;
}
.x-emoji-overlay:after {
content: "4c";
padding: 3px;
font-size: 1.5 * $pFontSize;
line-height: $pFontSize;
opacity: 0.5;
}
.strike {
position: relative;
display: inline-block;
}
.strike::before {
content: '';
border-bottom: 2px solid red;
width: 110%;
position: absolute;
left: -2px;
top: 46%;
}
.crossed-out {
/*inspired by https://www.tjvantoll.com/2013/09/12/building-custom-text-strikethroughs-with-css/*/
position: relative;
display: inline-block;
&::before,
&::after {
content: '';
width: 110%;
position: absolute;
left: -2px;
top: 45%;
opacity: 0.7;
}
&::before {
border-bottom: 2px solid red;
-webkit-transform: skewY(-20deg);
transform: skewY(-20deg);
}
&::after {
border-bottom: 2px solid red;
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
}
}
