Replacing svg x and circle with css div [duplicate] - css

Question

This question already has answers here:
Make plus symbol in CSS
(5 answers)
Closed 5 months ago.
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>

Answer 1

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>