仅用CSS实现两按钮间半圆分置：解决圆未覆盖右侧按钮问题

我仔细看了你的代码，发现问题主要出在按钮的定位方式和圆形元素的布局层级上——你给右侧按钮加了position:absolute让它脱离了正常文档流，导致圆形没法正确叠加在它上面；另外圆形的尺寸和定位也没调整到位，没法实现“半圆覆盖按钮”的效果。下面是纯HTML+CSS的修复方案：

Key Fixes & Improvements #

• 改用flex布局让容器内的按钮和圆形自然横向对齐，避免元素脱离文档流
• 调整圆形尺寸，让它的直径等于按钮高度，正好能覆盖两个按钮的边缘形成半圆效果
• 通过负margin让圆形卡在两个按钮中间，同时设置z-index确保圆形在按钮上方
• 修正文字的垂直居中，优化整体视觉效果

Full Working Code #

HTML

<div class="container">
  <div class="button1">
    <div class="text1">Order</div>
  </div>
  <div class="circle"></div>
  <div class="button2">
    <div class="text2">Order</div>
  </div>
</div>

CSS

.container {
  margin: 50px;
  display: flex; /* 横向对齐元素，保持正常文档流 */
  align-items: center; /* 垂直居中所有元素 */
}

.button1 {
  border: 1px solid black;
  border-radius: 3px;
  width: 180px;
  height: 34px;
  background: linear-gradient(to right, #142f42 50%, #ff511a 50%);
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all .5s ease-out;
  position: relative;
  z-index: 1; /* 确保按钮在圆形下方 */
}

.button1:hover {
  background: linear-gradient(to right, #142f42 100%, #ff511a 100%);
  background-position: left bottom;
}

.text1 {
  text-align: center;
  font-size: 16px;
  line-height: 34px; /* 和按钮高度一致，实现文字垂直居中 */
  color: black;
  transition: all .6s ease-out;
}

.text1:hover {
  color: white;
}

.button2 {
  border: 1px solid black;
  border-radius: 3px;
  width: 180px;
  height: 34px;
  background: linear-gradient(to left, #ff511a 50%, #142f42 50%);
  background-size: 200% 100%;
  background-position: left bottom;
  transition: all .5s ease-out;
  position: relative;
  z-index: 1; /* 确保按钮在圆形下方 */
}

.button2:hover {
  background: linear-gradient(to left, #ff511a 100%, #142f42 100%);
  background-position: right bottom;
}

.text2 {
  text-align: center;
  font-size: 16px;
  line-height: 34px; /* 文字垂直居中 */
  color: white;
  transition: all .6s ease-out;
}

.text2:hover {
  color: black;
}

.circle {
  z-index: 100;
  background-color: #fff;
  height: 34px; /* 直径等于按钮高度，形成完整圆形 */
  width: 34px;
  border-radius: 50%;
  box-shadow: 0 0 0 0.3rem #c0c0c0;
  margin: 0 -17px; /* 偏移半径距离，让半圆覆盖在两个按钮上 */
  flex-shrink: 0; /* 防止flex布局压缩圆形尺寸 */
}

这个方案里，圆形会完美夹在两个按钮中间，左右半圆分别覆盖在按钮的边缘，同时保留了你原来的按钮hover渐变效果。

内容的提问来源于stack exchange，提问作者M Musheer Ul Haq