如何使这个箭头在CSS只？ [英] How to make this arrow in CSS only?

问题描述

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

I'm building a wizard-like ordering process where I have this menu:

活动页面的颜色为绿色（在这种情况下为模型）。

The active page is colored green (in this case, Model).

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

At the moment i'm achieving my goal by using several divs and images:

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

左侧图片：

右图：

我发现一个SO答案，其中的一部分：
具有CSS的箭头框，但我遇到了左边的缩进问题。

I found a SO answer which does part of this: Arrow Box with CSS, however i'm having trouble with the indent at the left.

如果你对如何做到这一点有一个更好的想法，请让我知道！

If you have a better idea about how to do this, please let me know!

推荐答案

之间的箭头不需要是透明的（它是纯色）你可以使用：之前和：后

If the space between the arrows does not need to be transparent (it is solid color) you can use the :before and :after to create the edges (without new elements in DOM)

基本上，它创建边框的旋转正方形（

Basically, it creates rotated squares with the borders we want and places them accordingly

#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>

这篇关于如何使这个箭头在CSS只？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！