用css畫出一個圓圈，裡面有個對號

王铁柱6發表於2024-12-05
CSS
<!DOCTYPE html>
<html>
<head>
<style>
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: green;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* Needed for positioning the checkmark */
}

.checkmark {
  width: 70px;
  height: 45px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
</style>
</head>
<body>

<div class="circle">
  <div class="checkmark"></div>
</div>

</body>
</html>

This code creates a green circle with a white checkmark inside. Here's how it works:

  • circle class:

    • width and height: Set the dimensions of the circle.
    • border-radius: 50%;: Makes it a circle.
    • background-color: Sets the background color (green in this example).
    • display: flex, justify-content: center, align-items: center: These properties center the checkmark within the circle.
    • position: relative;: This is crucial for absolutely positioning the checkmark within the circle.

  • checkmark class:

    • width and height: Set the size of the checkmark.
    • border: Creates the checkmark lines using borders. Only the right and bottom borders are visible, creating the "tick" shape. white sets the color.
    • transform: rotate(45deg);: Rotates the checkmark 45 degrees to the correct orientation.

This is a simple and effective way to create a circle with a checkmark using only CSS. You can easily adjust the size, colors, and line thickness by modifying the CSS values.

相關文章