自定义形状的 html div 元素

Question

我正在尝试制作一个具有自定义形状的div。这就是我想做的： div

但是无法实现我想要的。

我尝试过的： 1)

.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)

.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>

Answer 1

我会使用 SVG 背景来实现这个。

.street-sign {
  width: 100px;
  aspect-ratio: 655/150;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 655 150'%3E%3Cpath style='stroke-width: 6px; stroke: rgb(41, 159, 69); fill: rgb(229, 247, 231);' d='M 43.989 4.064 L 587.406 4.047 C 607.936 4.252 614.586 8.562 625.792 22.347 C 625.792 22.347 651.191 52.761 651.01 74.167 C 650.842 94.036 622.234 131.218 622.234 131.218 C 612.984 141.926 604.84 145.856 587.406 145.947 L 43.989 145.954 C 21.898 145.954 3.989 128.045 3.989 105.954 L 3.989 44.064 C 3.989 21.973 21.898 4.064 43.989 4.064 Z'/%3E%3C/svg%3E");
  background-size: 100%;
}

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