用css畫出兩個大圓相交，可以在各自圓及相交部分輸入文字

王铁柱6發表於2024-12-05
CSS
<!DOCTYPE html>
<html>
<head>
<title>Overlapping Circles</title>
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ensure circles are centered vertically */
  margin: 0; /* Remove default body margin */
}

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute; /* Required for overlapping */
  font-size: 20px;
}

.circle1 {
  background-color: rgba(255, 0, 0, 0.5); /* Red with transparency */
  left: 50px;
}

.circle2 {
  background-color: rgba(0, 0, 255, 0.5); /* Blue with transparency */
  right: 50px; /* Position from the right to create overlap */
}

.intersection {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* Center the intersection */
  background-color: rgba(255, 255, 0, 0.5); /* Yellow with transparency for intersection */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1; /* Ensure intersection is on top */
  font-size: 20px;
}

</style>
</head>
<body>

<div class="circle circle1">Circle 1 Text</div>
<div class="circle circle2">Circle 2 Text</div>
<div class="intersection">Intersection Text</div>


</body>
</html>

Key improvements and explanations:

  • Transparency: Uses rgba colors for the circles, allowing the overlapping section to blend the colors visually.
  • Positioning: Positions the circles using left and right along with position: absolute; to create the overlap. This ensures they overlap regardless of content length.
  • Intersection Styling: Creates a separate div for the intersection area with its own styling and background color. z-index is used to ensure it appears above the other circles.
  • Centering: Uses flexbox for centering text within each circle and the intersection. The intersection is centered horizontally using transform: translateX(-50%);.
  • Responsiveness Considerations: While this example centers the circles on the page, for more complex layouts or responsive design, you might consider using a container element and adjusting positioning and sizing accordingly. Using percentages for widths could also help with responsiveness.

This revised code provides a cleaner and more visually appealing representation of overlapping circles with text. You can easily change the colors, sizes, and text content as needed.

相關文章