Html CSS自定义形状

请我想通过CSS创建类似的东西

---

只想使用CSS来创建这个带有边框半径的自定义形状。有什么想法吗？

这是一个似乎符合您需要的形状，您必须对边框和变换进行一些技巧，还需要使用：after和：before选择器来构建这种形状

#钻石盾{
宽度：0；
身高：40；
边框：50px实心透明；
边框底部：50px实心橙色；
位置：相对位置；
顶部：-10px；
左：250px；
变换原点：0%0%；
变换：旋转（82度）
}
#钻石盾：之后{
内容：''；
位置：绝对位置；
左侧：-50px；顶部：50px；
宽度：0；
身高：0；
边框：50px实心透明；
边框顶部：370px实心橙色；
}
#V形{
位置：相对位置；
文本对齐：居中；
填充：8px；
顶部：-9px；
边缘底部：6px；
左：164px；
高度：0px；
宽度：60px；
变换原点：0%0%；
变换：旋转（-98度）；
}
#雪佛龙：以前{
内容：''；
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：51%；
背景：白色；
变换：倾斜（0度，44度）；
}
#雪佛龙：之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
身高：100%；
宽度：50%；
背景：白色；
变换：倾斜（0度，-44度）；
}

@sanna-欢迎来到Stack Overflow，请阅读如何提问-。这不是一个代码编写服务，你必须展示你已经尝试了什么，所以这篇文章中的图像一直在变化…@sanaa我想你很困惑，不知道你想问什么？哇，非常感谢你mach@Pablo Máximo