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

如果箭头之间的空间并不需要是透明的（这是实心的颜色），您可以使用: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 >Diersoort / I&amp;R</div>        <div >Model</div>        <div >Varianten</div>        <div >Bedrukkingen</div>        <div >Bevestiging</div></div>