如何用CSS实现弧形箭头样式？现有布局代码待优化

核心思路 #

用CSS伪元素结合border-radius模拟弧形箭头，同时将原table-cell布局替换为更灵活的flex布局，方便控制元素形状与位置。

修改后的完整代码 #

HTML（仅移除冗余占位符） #

<div class="homepage-wrapper">
  <div class="homepage-dispatch"></div>
  <div class="homepage-body">
    Same Day Dispatch before 12pm
  </div>
</div>

CSS #

.homepage-wrapper {
  border: 1px solid #d07028;
  width: 100%;
  border-radius: 4px;
  display: flex; /* 替换table布局，提升可控性 */
  overflow: hidden; /* 隐藏内部元素溢出部分，保证容器圆角完整 */
  height: 80px;
}

.homepage-body {
  flex: 1; /* 自动填充剩余空间 */
  display: flex;
  align-items: center; /* 垂直居中文字 */
  padding-left: 20px;
  background-color: #fff;
}

.homepage-dispatch {
  width: 100px;
  background-color: #862632;
  background-image: url('../Images/homepage/shipping.png');
  background-repeat: no-repeat;
  background-position: center;
  position: relative; /* 为伪元素提供定位基准 */
}

/* 生成右侧弧形箭头 */
.homepage-dispatch::after {
  content: '';
  position: absolute;
  right: -30px; /* 超出容器形成箭头突出 */
  top: 0;
  width: 30px;
  height: 100%;
  background-color: #862632;
  border-top-right-radius: 40px; /* 右上弧形 */
  border-bottom-right-radius: 40px; /* 右下弧形 */
}

关键细节说明 #

• 换用flex布局后，元素排列更灵活，overflow: hidden能避免内部元素破坏容器的圆角样式。
• 伪元素::after负责构建弧形箭头部分，通过border-radius设置上下圆角，再用负右定位让它超出左侧色块，形成箭头的弧形突出效果。
• 调整homepage-body为flex布局，实现文字垂直居中，贴合设计需求。

备选方案（精准裁剪） #

如果需要更精细的弧形形状，可直接用clip-path裁剪左侧色块：

.homepage-dispatch {
  width: 120px; /* 预留弧形宽度 */
  background-color: #862632;
  background-image: url('../Images/homepage/shipping.png');
  background-repeat: no-repeat;
  background-position: center;
  /* 通过裁剪路径生成带弧形的箭头形状 */
  clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
}

这种方式无需伪元素，调整百分比即可控制弧形弧度，适配不同设计需求。

内容的提问来源于stack exchange，提问作者Sami.C