Html 如何仅在CSS中制作此箭头？

我正在构建一个类似向导的订购流程，其中有以下菜单：

活动页面的颜色为绿色（在本例中为Model）

如何仅使用CSS制作此箭头？：

目前，我正在通过使用几个div和图像来实现我的目标：

<div class="menuItem">
    <div></div> <!-- The left image -->
    <div>Varianten</div>
    <div></div> <!-- The right image -->
</div>

瓦里安

左图：

右图：

我找到了一个答案，这也是其中的一部分： ，但是我对左边的缩进有问题

---

如果你有更好的办法，请告诉我

如果箭头之间的空间不需要透明（它是纯色），可以使用

：before

和

：after

创建边（DOM中没有新元素）

基本上，它创建带有我们想要的边界的旋转正方形，并相应地放置它们

#流程箱{
保证金：自动；
填充：20px；
最小宽度：700px；
}
#流动箱组{
显示：内联块；
位置：相对位置；
高度：25px；
线高：25px；
填充：0 20px；
边框：1px实心#ccc；
右边距：2px；
背景色：白色；
}
#流程箱右分区：后{
内容：''；
边框顶部：1px实心#ccc；
右边框：1px实心#ccc；
宽度：18px；
高度：18px；
位置：绝对位置；
右：0；
顶部：-1px；
背景色：白色；
z指数：150；
-webkit变换：平移（10px，4px）旋转（45度）；
-莫兹变换：平移（10px，4px）旋转（45度）；
-ms变换：平移（10px，4px）旋转（45度）；
-o变换：平移（10px，4px）旋转（20度）；
变换：平移（10px，4px）旋转（45度）；
}
#流程箱左分区：之前{
内容：''；
边框顶部：1px实心#ccc；
右边框：1px实心#ccc；
宽度：18px；
高度：18px；
位置：绝对位置；
左：0；
顶部：-1px；
背景色：白色；
z指数：50；
-webkit变换：平移（-10px，4px）旋转（45度）；
-moz变换：平移（-10px，4px）旋转（45度）；
-ms变换：平移（-10px，4px）旋转（45度）；
-o变换：平移（-10px，4px）旋转（20度）；
变换：平移（-10px，4px）旋转（45度）；
}
#流动箱，激活{
背景颜色：绿色；
颜色：白色；
}
#流量箱分区激活：之后{
背景颜色：绿色；
}

迪尔肖特/工业及科技部；R
模型
瓦里安
贝德鲁金根
斜切

html{
背景色：红色；
}
第页{
填充底部：40px；
填充顶部：40px；
文本对齐：居中；
z指数：1；
位置：相对位置；
}
分割菱形，分割色带，分割右箭头，分割左箭头{
显示：内联块；
颜色：#FFFFFF；
字体大小：22px；
线高：38px；
利润率：15px0；
位置：相对位置；
宽度：200px；
}
div.diamond:before，div.diamond:after，div.ribbon:before，div.ribbon:after，div.right-arrow:before，div.right-arrow:after，div.left-arrow:before，div.left-arrow:after{
内容：“；
边框样式：实心；
边框宽度：0；
身高：0；
位置：绝对位置；
宽度：0；
}
钻石师{
背景色：#中交；
}
戴蒙德：之后，戴蒙德：之前{
边框颜色：透明#CCCC；
}
戴蒙德分区：以前{
左：-19px；
边框宽度：19px 19px 19px 0；
}
戴蒙德分区：之后{
右：-19px；
边框宽度：19px 0 19px 19px；
}
带状分区{
背景色：#中交；
}
div.ribbon:之前，div.ribbon:之后{
顶部：6px；
z指数：-15；
}
分区功能区：之前{
边框颜色：#B2B2B2#B2B2B2#B2B2B2透明；
边框宽度：19px；
左：-25px；
}
分区功能区：在{
边框颜色：#B2B2B2透明#B2B2B2#B2B2B2；
边框宽度：19px；
右：-25px；
}
右箭头{
背景色：#中交；
}
右箭头：之后，右箭头：之前{
边框宽度：19px 0 19px 19px；
}
右箭头：之前{
边框颜色：#中交透明；
左：-19px；
}
右箭头：后{
边框颜色：透明#CCCC；
右：-19px；
}
左箭头{
背景色：#中交；
}
左箭头：后，左箭头：前{
边框宽度：19px 19px 19px 0；
}
div.左箭头：之前{
边框颜色：透明#CCCC；
左：-19px；
}
div.左箭头：之后{
边框颜色：#中交透明；
右：-19px；
}

钻石


丝带


右箭头


左箭头

以下是使用CSS3功能的另一种方法。使用此方法的一个优点（以及添加单独答案的主要原因之一）是箭头之间的空间可以是透明的

基本上执行情况如下：

每个步骤/项目都有一个

div

，其中包含需要显示的文本。假设该

div

的

高度

为

x

（本例中为50px）

创建了两个伪元素（

：before

和

：after

），它们的

宽度与父
div
相同，
高度与父
的一半（
x/2
）相同。<代码>：在元素之前没有<代码>边框底部/代码>而<代码>：在元素没有“代码”>边框顶部/代码>，以避免出现在形状中间（平行于x轴）的线条。

然后将这两个伪元素以相反方向进行变换，并将其放置在彼此的正下方，从而最终形成所需的形状

伪元素被分配一个负的

z-index

，以将它们推到父

div

（以及它的文本）后面

对

第一个子元素

和

最后一个子元素

进行了轻微修改（

左

位置，

伪元素的边框，
backgro