Replacing svg x and circle with css div

Question

How do I replace this svg x with a circle around it with a div?

What I am trying to do here is replace the svg with a css div.

How do I do that?

Here is my code: https://jsfiddle.net/va26zobe/

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.exit {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border-radius: 50%;
  clip-path: circle(50%);
}

svg,
use {
  fill: transparent
}

<div class="exit" >
        <svg width="100%" height="100%" viewBox="-144 -144 288 288">
          <title>exit</title>
          <circle cx="0" cy="0" r="113" />
          <path fill="red" mask="url(#m)" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
          <mask id="m">
            <path fill="white" d="m-101.116-101.116a143 143 0 11202.232 202.232a143 143 0 01-202.232-202.232zzzz" />
            <path fill="black" d="m-101.116-101.116m169.705 11.313a113 113 0 00-137.178 0l68.589 68.59zm-158.392 21.214a113 113 0 000 137.178l68.59-68.589zm21.214 158.392a113 113 0 00137.178 0l-68.589-68.59zm158.392-21.214a113 113 0 000-137.178l-68.59 68.589z" />
          </mask>
        </svg>
      </div>

take the code from the duplicate and add a rotation of 45deg — Temani Afif, Oct 07 '22 at 20:23

score 2 · Accepted Answer · answered Oct 07 '22 at 16:43

You may use this char ⨂

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: repeating-linear-gradient(135deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), repeating-linear-gradient(22.5deg, rgb(0, 0, 0) 0px, rgb(0, 0, 0) 10px, transparent 10px, transparent 11px), linear-gradient(90deg, rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221), rgb(0, 89, 221));
}

.exit {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0;
  left: 0;
  width: 47.63px;
  height: 47.63px;
  cursor: pointer;
  border-radius: 50%;
  clip-path: circle(50%);
}

.exit:before {
  content: '⨂';
  font-size: 47.63px;
  line-height: 47.63px;
  color: red;
}

<div class="exit" >
</div>

Replacing svg x and circle with css div

1 Answers1