用css畫出一個圓圈，裡面有個叉號（不能用英文字母x）

王铁柱6發表於2024-12-05
CSS
<!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.

相關文章