小编nic*_*son的帖子

我已经包含了一张图片,因为我无法用文字描述它.但基本上我希望以最好的方式实现这种形式的"标签".

我知道之前有过这方面的问题,使用一些新的css3技巧将片段旋转到位,但我从来没有见过这样的东西.在目前呈现蓝绿色的背后,最有可能出现图像.红线代表页面上的内容.

我过去使用.png文件中的那个小弯曲位完成了这个,但我讨厌这样做.

我也见过这个:

如何使用css制作这样的斜角标签？

但这并不是我想要的,但如果有类似的解决方案,我会对此持开放态度.我还需要一种方法div来继续屏幕的最右边缘,同时仍然保持标签的左侧部分固定到位.

来自@ chipChocolate.py的解决方案

我使用芯片的解决方案,但我交换了它,以便选项卡是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>

交换颜色,以便您可以在这里看到它.