html – 如何使CSS中的箭头？

我正在建立一个类似巫师的订购流程,我在这里有这个菜单：

活动页面为绿色(在这种情况下为模型).

如何使用CSS只做这个箭头？

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

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

左图：

正确的形象：

我发现了一个SO答案,其中的一部分是：
Arrow Box with 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 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>

原文地址：https://www.jb51.cc/html/230335.html