How to make a cross sign red circle with CSS

Question

I want to make cross sign (X) in a red circle.

Here is my try:

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

But it looks like this:

So how can I place the stem in the right order to make the X sign?

And the HTML is also here:

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

Answer 1

If anyone wants to solve this using pseudo-classes (::after, ::before), here’s my suggestion:

  
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>

Answer 2

With a shorter code you could obtain the same result using a pseudoelement containing the unicode symbol 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

I'd suggest you use flexbox to center the items in the circle. And then rotate both stems. Also, you can use the same class for both stems, so css is lighter. Here's the code

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

Cheers!

Answer 4

One of the reason why your stems are not appearing as they should is because you forgot to add position: relative to the parent .crosssign element. There is an easier way to get about this:

• Use the top: 50%; left: 50%; transform: translate(-50%, -50%) trick to vertically and horizontally center the stems
• Ensure that stem and stem2 have their width and height flipped (so that they appear 90deg rotated relative to each other)
• Apply transform: rotate(45deg) on the parent element

Moreover, you do not need to add vendor prefixes to CSS transform: all browsers today (even IE11) supports the unprefixed version.

Here is a proof-of-concept example:

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