html - 纯 CSS 倾斜/圆形标签

Question

我附上了一张图片，因为我无法用文字描述它。但基本上我希望以尽可能最好的方式实现这种“标签”形状。

我知道之前有人对此有疑问，使用一些新的 css3 技巧将片段旋转到位，但我从来没有见过这样的事情。在当前有蓝绿色的地方后面，很可能会有一个图像。红线代表页面上的内容。

我过去曾使用一个带有小 flex 位的 .png 文件来完成此操作，但我讨厌这样做。

我也看到了这个:

How to make angled tab like this using css?

但这并不是我想要的，但如果有类似的解决方案，我愿意接受。我还需要一种方法让 div 继续移动到屏幕的最右边缘，同时仍将选项卡的左侧部分固定到位。

@chipChocolate.py 的解决方案

我使用了 chip 的解决方案，但我交换了它，使选项卡成为 svg 元素:

<svg viewBox="0 0 960 70" preserveAspectRatio="none">
    <path fill="#008882" d="M0,61c0,0,141,0,215.5,0C294,61,358,0.3,423.5,0.3c35,0,536.5,0,536.5,0v69.5H0V61z"/>
</svg>

调换了颜色以便您可以在此处看到它。

Answer 1

“我希望以最佳方式可能实现这种“标签”形状” - 使用svg。 p>

<svg width="100%" height="84" viewBox="0 0 700 84" preserveAspectRatio="none">
  <path d="M0,0 h700 v30 h-280 c-60,0 -60,15 -100,30 c-10,4 -15,5 -35,6 h-285" fill="#008882" />
</svg>