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

Question

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

我正在建立一个类似向导的订购过程，该菜单具有以下菜单：

活动页面显示为绿色（在本例中为Model）。

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

目前，我通过使用多个div和图像来实现自己的目标：

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

我找到了一个能做到这一点的SO答案： CSS的Arrow Box，但是我在左侧的缩进方面遇到了麻烦。

如果您对如何执行此操作有更好的想法，请告诉我！

Answer 1

如果箭头之间的空间并不需要是透明的（这是实心的颜色），您可以使用:before和:after创建边缘（没有在DOM新元素）

基本上，它将创建具有所需边框的旋转正方形，并将其相应放置

#flowBoxes {

    margin:auto;

    padding:20px;

    min-width:700px;



}

#flowBoxes div {

    display:inline-block;

    position:relative;

    height:25px;

    line-height:25px;

    padding:0 20px;

    border:1px solid #ccc;

    margin-right:2px;

    background-color:white;

}



#flowBoxes div.right:after{

    content:'';

    border-top:1px solid #ccc;

    border-right:1px solid #ccc;

    width:18px;

    height:18px;

    position:absolute;

    right:0;

    top:-1px;

    background-color:white;

    z-index:150;



    -webkit-transform: translate(10px,4px) rotate(45deg);

       -moz-transform: translate(10px,4px) rotate(45deg);

        -ms-transform: translate(10px,4px) rotate(45deg);

         -o-transform: translate(10px,4px) rotate(20deg);

            transform: translate(10px,4px) rotate(45deg);

}



#flowBoxes div.left:before{

    content:'';

    border-top:1px solid #ccc;

    border-right:1px solid #ccc;

    width:18px;

    height:18px;

    position:absolute;

    left:0;

    top:-1px;

    background-color:white;

    z-index:50;



    -webkit-transform: translate(-10px,4px) rotate(45deg);

       -moz-transform: translate(-10px,4px) rotate(45deg);

        -ms-transform: translate(-10px,4px) rotate(45deg);

         -o-transform: translate(-10px,4px) rotate(20deg);

            transform: translate(-10px,4px) rotate(45deg);

}

#flowBoxes .active{

    background-color:green;

    color:white;

}

#flowBoxes div.active:after{

    background-color:green;

}


<div id="flowBoxes">

        <div class="right">Diersoort / I&amp;R</div>

        <div class="left right active">Model</div>

        <div class="left right">Varianten</div>

        <div class="left right">Bedrukkingen</div>

        <div class="left">Bevestiging</div>

</div>