<!DOCTYPE html>
<html>
<head>
<style>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid black;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.cross {
width: 70%;
height: 70%;
position: relative;
}
.cross:before, .cross:after {
content: '';
position: absolute;
background-color: black;
}
.cross:before {
transform: rotate(45deg);
}
.cross:after {
transform: rotate(-45deg);
}
.cross:before, .cross:after {
width: 2px; /* Adjust thickness */
height: 100%;
left: calc(50% - 1px); /* Center the lines */
top: 0;
}
</style>
</head>
<body>
<div class="circle">
<div class="cross"></div>
</div>
</body>
</html>
This code creates a circle with a cross inside it using only CSS:
circleclass: This styles the circle itself.border-radius: 50%;makes it round.display: flex,align-items, andjustify-contentcenter the cross within the circle.crossclass: This is the container for the cross. It's positioned relatively to allow absolute positioning of the pseudo-elements that form the cross.cross:beforeandcross:after: These pseudo-elements create the lines of the cross.content: '';is required for pseudo-elements.transform: rotate(45deg)andtransform: rotate(-45deg)rotate the lines to form the "X".widthandheightcontrol the thickness and length of the lines.leftandtopposition the lines.
This approach avoids using any characters or images, creating the cross purely with CSS styling. You can adjust the size, color, and thickness of the elements by modifying the CSS values.
标签：rotate,lines,cross,叉号,transform,有个,circle,height,css From： https://www.cnblogs.com/ai888/p/18587728