如何用CSS制作十字符号红圈

Question

我想在红色圆圈中画十字符号（

X

）。

这是我的尝试：

.crosssign {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.crosssign_circle {
    position: absolute;
    width:22px;
    height:22px;
    background-color: red;
    border-radius:11px;
    left:0;
    top:0;
}

.crosssign_stem {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#fff;
    left:11px;
    top:6px;
}

.crosssign_stem2 {
    position: absolute;
    width:3px;
    height:9px;
    background-color:#fff;
    right:11px;
    top:6px;
}

但它看起来像这样：

那么我怎样才能以正确的顺序放置

stem

来制作

X

符号呢？

HTML 也在这里：

<span class="crosssign">
<div class="crosssign_circle"></div>
<div class="crosssign_stem"></div>
<div class="crosssign_stem2"></div>
</span>

Answer 1

您的茎没有按应有的方式显示的原因之一是因为您忘记将

position: relative

添加到父

.crosssign

元素。有一个更简单的方法可以解决这个问题：

• 使用

  top: 50%; left: 50%; transform: translate(-50%, -50%)

  技巧使茎垂直和水平居中
• 确保stem和stem2的宽度和高度翻转（以便它们相对于彼此旋转90度）
• 将

  transform: rotate(45deg)

  应用于父元素

此外，您不需要在 CSS 转换中添加供应商前缀：当今所有浏览器（甚至 IE11）都支持无前缀版本。

这是一个概念验证示例：

.crosssign {
  display: inline-block;
  width: 22px;
  height: 22px;
  position: relative;
  transform: rotate(45deg);
}

.crosssign_circle {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: red;
  border-radius: 11px;
  left: 0;
  top: 0;
}

.crosssign_stem,
.crosssign_stem2 {
  position: absolute;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.crosssign_stem {
  width: 3px;
  height: 9px;
}

.crosssign_stem2 {
  width: 9px;
  height: 3px;
}

<span class="crosssign">
  <div class="crosssign_circle"></div>
  <div class="crosssign_stem"></div>
  <div class="crosssign_stem2"></div>
</span>

Answer 2

使用更短的代码，您可以使用包含 unicode 符号的伪元素获得相同的结果

U+00D7

.crosssign {
  display: inline-grid;
  place-content: center;
  aspect-ratio: 1;
  min-inline-size: 1.25em;
  border-radius: 50%;
  background-color: #d12021;
}

.crosssign::before {
  content: "\D7";
  color: #fff;
  font-weight: bold;
}

<span class="crosssign"></span>

Answer 3

我建议您使用 Flexbox 将项目置于圆圈中心。然后旋转两个茎。另外，你可以对两个茎使用相同的类，这样 css 就更轻了。这是代码

.crosssign {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 22px;
    height:22px;
    background-color: red;
    border-radius:11px;
}

.crosssign_stem {
    position: absolute;
    width:4px;
    height:11px;
    background-color:#fff;
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
}

.crosssign_stem.right {
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

<span class="crosssign">
  <div class="crosssign_stem"></div>
  <div class="crosssign_stem right"></div>
</span>

干杯！

Answer 4

如果有人想使用伪类（::after、::before）解决这个问题，这是我的建议：

  
document.getElementById("collapse").addEventListener("click", myFunction);

function myFunction() {
   document.getElementById("collapse").classList.toggle("active");
}

.collapse{
    background: black;
    border-radius: 20px;
    display:flex;
    height: 30px;
    justify-content:center;
    position: relative;
    width: 30px;
} 
.collapse:before, .collapse:after{
    background: white;
    content: "";
    display: block;
    height: 2px;
    top: 50%;
    transition: .35s;
    position: absolute;
    width: 20px;
}
.collapse:before{
    transform: translatey(-50%);
}
.collapse:after{
    transform: translatey(-50%) rotate(90deg);
}
.collapse.active:before{
    transform: translatey(-50%) rotate(-90deg);
    opacity: 0;
}
.collapse.active:after{
    transform: translatey(-50%) rotate(0);
}

<div id='collapse' class='collapse'></div>