logo标签列表

在CSS中绘制一个X

htmlcssdrawcss-shapes
71

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

输入图片描述

我想在这个 div 里面画一个白色 X，使它看起来更像

输入图片描述

是否有办法在 CSS 中实现这个效果，还是直接在 Photoshop 上绘制并将图像用作 div 的背景会更容易？这个 div 代码只是这样的

div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}
你能不能只使用字母X，给它一个绝对位置和白色颜色，并放在背景的顶部？ - topcat3
1
@topcat3 — 想象一下这在屏幕阅读器中会听起来怎样。 - Quentin
15个回答
101

您需要一个被称为交叉符号的实体：

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

查看演示Fiddle

跨浏览器问题

交叉标记实体在Safari或Chrome中无法显示。 然而，相同的实体在Firefox、IE和Opera中显示良好。

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

6
有没有办法在Safari中强制改变叉号的颜色？它总是呈现为红色... - minlare
7
Unicode字符“MULTIPLICATION SIGN”的十六进制代码为\D7（U+00D7），因此CSS代码应为content: "\D7";。 - Spyryto
73

单元素解决方案：在这里输入图片描述

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>

可能对这个应用过于复杂，但是它展示了使用变换可以实现什么。 - Marc Audet
15
这才是真正的答案！不错。绝对不会“过于复杂”，它非常完美，因为它不使用字体，并且可以缩放到任何大小。已点赞！ - FirstVertex
2
我完全同意H Dog的观点，这是正确的答案。在Chrome中使用❌会显示一个带问号的方框。使用字体可以使十字的末端倾斜。干得好Tambo！ - Rogala
1
惊人的解决方案，已点赞。 我添加了一个答案，为您的工作增加了自适应数学功能，当然，对于解决方案本身的全部功劳归给您。 - Rashid Clark
47

这是另一种纯CSS解决方案（即不使用图像、字符或其他字体），基于@Bansoa is the answer的答案。

我简化了它并添加了一些Flexbox魔法，使其具有响应性。

在此示例中，十字架自动缩放到任何正方形容器，并且要更改其线条的粗细，只需调整height: 4px;（为使十字架真正具有响应性，您可能需要将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;
}

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>

1
假设我想让它适用于非正方形的DIV，并且不保持纵横比？ - Ross Presser
1
@RossPresser 你可以使用类似 transform: scale(1, 0.75); 的东西来缩放十字形状。它必须应用于 <div>。 - Neurotransmitter
2
到目前为止，这是最好的答案。 - avia
23

使用CSS渐变可以创建一个漂亮的X：

screenshot

演示： https://codepen.io/JasonWoof/pen/rZyRKR

代码：

<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>
19

这是另一次尝试... 这次使用 ×。这个页面上很多例子对我来说只显示成一个框，但 &times; 是有效的

HTML

<div class="close"></div>

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
}

JSFIDDLE

&times; 实体的参考资料：http://www.fileformat.info/info/unicode/char/00d7/index.htm - Marc Audet
@MarcAudet 感谢您提供的链接。我以前没有见过那个网站，它非常有帮助。然而，就你的回答而言，我只看到了框。你有机会用Mac吗？ - Gray
我正在使用Windows 7机器工作。所以你在我的fiddle中看不到交叉标记？ - Marc Audet
没错。我正在使用Windows 7和Chrome浏览器（在IE / FF中也有相同的结果）。这是一个屏幕截图：http://i.imgur.com/u9UwCQZ.png - Gray
还有一个不错的解决方案，特别是使用实体时。我只需要稍微调整一下位置，将“x”居中 - 请参见更新的jsFiddle。 - Netsurfer
@Gray 确实，你是对的，在Chrome中没有显示叉号，请参见以下测试页面：http://www.fileformat.info/info/unicode/char/274c/browsertest.htm 我不确定为什么会出现这种情况，在Windows上的Safari中也有同样的问题。但在Opera和IE中可以正常工作。 - Marc Audet
18
你可以在div标签内加入字母X，然后使用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;
}
8
既然您选择了这个答案，我会提取其中（可能）有用的信息并将其放在这里。在某些字体下，“×”看起来比“X”更美观。 - Gray
6
所有提出使用伪元素(::before或::after)的答案都更值得推荐，因为这会与该答案相比在语义上更加正确。问题提问者选择了这个答案，表明可能缺乏理解...！ - Netsurfer
1
@Netsurfer 我同意使用伪元素是首选，但我不确定是否应该说这样做是“语义上不正确的”。使用伪元素有许多好处（我认为最重要的是您无法选择文本），但这并不意味着这种解决方案是错误的。 - Gray
4
@Gray: 这是有道理的！因为如果 'X' 有一个 'function'，那么它应该是一个 <input> 或 <button> 元素。如果不是，则纯粹是“表示性标记”。因此，在这两种情况下都是错误的。并且假设它仅用于表示目的，则应使用 CSS 实现，并且不向标记添加任何非内容元素。 - Netsurfer
@Netsurfer 有趣的观点。感谢澄清。当你这样表达时，我可以理解你的观点。 - Gray
显示剩余3条评论
11
你可以使用CSS属性"content":
div {
    height: 100px;
    width: 100px;
    background-color: #FA6900;
    border-radius: 5px;
}

div:after {
    content: "X";
    font-size: 2em; 
    color: #FFF;
}

就像这样：http://jsfiddle.net/HKtFV/

9

#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>

9

我喜欢这个问题！你可以很容易地修改我的代码，把白色X放在一个橙色正方形中：

图片描述

这里是演示的fiddle

以下是 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: "\274c";
  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);
  }
}
有没有办法让“x-emoji-overlay”解决方案适用于更长的文本？“crossed-out”无论如何都能正常工作 - undefined
如果有办法，我不会感到惊讶。但是，是的，你可以通过编辑“划掉”的样式来实现你想要的效果。 - undefined
5
您可以通过为“x”设置样式来实现这一点。
text-align: center;
font-size: 120px;
line-height: 100px;
color: white;
font-family: monospace;

http://jsfiddle.net/Ncvyj/1/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接