用css画出一个圆圈，里面有个叉号（不能用英文字母x） 

<!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:

  • circle class: This styles the circle itself. border-radius: 50%; makes it round. display: flex, align-items, and justify-content center the cross within the circle.
  • cross class: This is the container for the cross. It's positioned relatively to allow absolute positioning of the pseudo-elements that form the cross.
  • cross:before and cross:after: These pseudo-elements create the lines of the cross. content: ''; is required for pseudo-elements. transform: rotate(45deg) and transform: rotate(-45deg) rotate the lines to form the "X". width and height control the thickness and length of the lines. left and top position 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.

posted @ 2024-12-05 09:04  王铁柱6  阅读(98)  评论(0)    收藏  举报