如何制作自定义形状的HTML div元素？两种尝试均未成功

我想制作一个路牌样式的自定义形状HTML div（左侧为矩形，右侧是带圆角的箭头状），尝试了两种方法都没达到预期效果，以下是我试过的代码：

尝试过的方法1：使用border-radius #

.street-sign {
  background-color: #e9f7ea;
  border: 1px solid #3ca649;
  width: 100px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="street-sign">5th Avenue</div>

尝试过的方法2：使用clip-path #

.street-sign {
  background-color: #e9f7ea;
  border: 1px solid #3ca649;
  width: 100px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

<div class="street-sign">5th Avenue</div>

问题分析 #

• 方法1的border-radius仅能实现右侧半圆效果，整体是矩形加半圆的组合，并非箭头状，且文字布局容易受挤压。
• 方法2的clip-path创建的是尖角箭头，没有圆角，和预期的圆角路牌形状不符，同时clip-path会切断边框，导致右侧箭头部分的边框不完整。

正确实现方案 #

推荐两种可行的实现方式，都能完美匹配圆角路牌的需求：

方案1：使用SVG路径定义clip-path

通过path()函数传入SVG路径，精准控制圆角箭头的形状，同时保证边框完整：

.street-sign {
  background-color: #e9f7ea;
  border: 1px solid #3ca649;
  width: 120px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* SVG路径：左侧矩形+右侧圆角箭头 */
  clip-path: path('M0,0 L90,0 Q105,0 105,15 L105,15 Q105,30 90,30 L0,30 Z');
  padding-right: 20px; /* 为箭头区域预留文字空间 */
}

<div class="street-sign">5th Avenue</div>

方案2：使用伪元素实现

通过伪元素单独创建右侧的圆角箭头，避免clip-path破坏边框：

.street-sign {
  background-color: #e9f7ea;
  border: 1px solid #3ca649;
  border-right: none; /* 右侧边框由伪元素实现 */
  width: 100px;
  height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.street-sign::after {
  content: '';
  position: absolute;
  right: -11.5px; /* 数值等于元素高度的一半 */
  top: -1px;
  width: 23px;
  height: 23px;
  background-color: #e9f7ea;
  border: 1px solid #3ca649;
  border-left: none;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
}

<div class="street-sign">5th Avenue</div>

内容的提问来源于stack exchange，提问作者Hasan Çil