Html 如何在CSS中实现响应功能区形状？

试图用css实现这一点。 我已经做到了这一点，但如果我的标签（职业）比

div

长，这一点就会中断。如果长度超过内容包装，则

div的高度将增加。但左边的剪彩并没有相应地做到这一点。有人能提出更好的方法吗


。自定义标记容器{
边框：1px实心；
保证金：自动；
显示器：flex；
对齐项目：拉伸；
边框颜色：绿色透明；
填充：4px！重要；
}
.自定义标记容器>p{
颜色：绿色；
字体大小：粗体；
弹性：1；
保证金：自动；
}
#左三角形{
高度：25px；
宽度：25px；
背景：透明；
变换：rotateZ（45度）translateX（-12.5px）translateY（12.5px）；
边框：1px实心；
边框颜色：绿色透明透明；
}

你好，Worldsm

如果您有白色背景，那么您可以使用两个css三角形，一个覆盖另一个，并为功能区创建边。如果您需要一些透明度，那么您应该依赖（检查支持是否适合您的用户）或一些SVG元素


*{
框大小：边框框；
}
.丝带{
宽度：100%；
高度：100px；
边框：2件纯蓝；
位置：相对位置；
填充：0 120px；
线高：100px；
文本对齐：居中；
字体大小：30px；
}
.ribbon:之前，
.ribbon:之后{
内容：''；
宽度：0；
身高：0；
边框顶部：50px实心透明；
左边框：100px纯绿色；
边框底部：50px实心透明；
位置：绝对位置；
排名：0；
左：0；
}
.ribbon:之后{
左边框颜色：白色；
左：-3px；
}
CARRIER
这里有一个想法，它依赖于倾斜变换，在这种变换中，它将具有响应性，并且您将具有透明度：


.box{
高度：50px；
边框：2倍纯绿；
左边框：0；
边界半径：0 5px 5px 0；
位置：相对位置；
保证金：5px；
}
.box:之前，
.盒子：之后{
内容：“；
位置：绝对位置；
左：0；
身高：50%；
宽度：3倍；
背景：绿色；
}
.盒子：以前{
排名：0；
变换：倾斜（45度）；
变换原点：顶部；
}
.盒子：之后{
底部：0；
变换：倾斜（-45度）；
变换原点：底部；
}

查看这篇文章，你的丝带背景是透明的还是白色的？@Justinas:在这种情况下是透明的，但理想情况下也可以是不同的颜色。非常感谢你的帮助。但我还是被卡住了。在这里，您可以指定样式中的高度。是否有一种方法可以自动计算div的大小并动态调整高度。这是因为我没有关于将出现的标签大小的信息。编辑：已修复，只是将属性“高度”更改为“最小高度”。再次非常感谢@绝对地，我指定了不同的高度来突出响应性。无需增加高度，只需将内容放入其中，它就会自动调整