如何在CSS中制作此箭头？

Question

我正在建立一个类似向导的订购流程，我有这个菜单：

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

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

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

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

左图：

正确的图片：

我找到了一个SO答案，其中包括： Arrow Box with CSS，但是我在左侧的缩进时遇到了问题。

如果您对如何做到这一点有更好的了解，请告诉我们！

Answer 1

如果箭头之间的空格不需要是透明的（它是纯色），您可以使用:before和:after来创建边缘（ >没有DOM中的新元素）

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

基本上实施如下：

1. 每个步骤/项目都有一个div，它包含需要显示的文本。我们假设此height的{​​{1}}为div（此示例中为50px）。
2. 创建了两个伪元素（x和:before），其:after与父width相同，div为一半（{{ 1}}）父母。 height元素没有x/2，而:before元素没有border-bottom，以避免在形状中间出现一条线（与x轴平行）。
3. 这两个伪元素然后:after以相反的方向变换，并以这样的方式定位，使它们直接在彼此之下，从而最终形成所需的形状。
4. 为伪元素分配了一个否定border-top，以便将它们推到父skew后面（因此也就是其文字）。
5. z-index和div元素略有修改（first-child位置，last-child伪元素，left和border父母background）实现直接的一面。
6. 我们可以为活动元素添加border类，也可以为下面示例中的形状添加div效果。

active

hover

---

  

注意：上面代码段中的.steps { height: 50px; width: 150px; text-align: center; line-height: 50px; position: relative; margin: 10px 0px 10px 20px; display: inline-block; } .steps:before, .steps:after { content: ''; position: absolute; left: 0px; width: 150px; height: 25px; z-index: -1; } .steps:before { top: -2px; border-top: 2px solid blue; border-right: 2px solid blue; border-left: 2px solid blue; background: lightblue; -moz-transform: skew(30deg); -webkit-transform: skew(30deg); transform: skew(30deg); } .steps:after { bottom: -2px; border-left: 2px solid blue; border-right: 2px solid blue; border-bottom: 2px solid blue; background: lightblue; -moz-transform: skew(-30deg); -webkit-transform: skew(-30deg); transform: skew(-30deg); } .steps:last-child { background: lightblue; border-right: 2px solid blue; border-top: 2px solid blue; border-bottom: 2px solid blue; margin-left: 38px; } .steps:first-child { background: lightblue; border-left: 2px solid blue; border-top: 2px solid blue; border-bottom: 2px solid blue; margin-right: 18px; } .steps:first-child:before, .steps:first-child:after { left: 18px; } .steps:last-child:before, .steps:last-child:after { left: -18px; } /* Hover Styles */ .steps:first-child:hover, .steps:last-child:hover, .steps:hover:before, .steps:hover:after { background: lightgreen; } .steps:first-child:hover { border-left: 2px solid green; } .steps:last-child:hover { border-right: 2px solid green; } .steps:hover:before { border-top: 2px solid green; border-right: 2px solid green; border-left: 2px solid green; } .steps:hover:after { border-left: 2px solid green; border-right: 2px solid green; border-bottom: 2px solid green; } .steps:first-child:hover, .steps:last-child:hover { border-top: 2px solid green; border-bottom: 2px solid green; } /* Active Styles */ .active:first-child, .active:last-child, .active:before, .active:after{ background: bisque; } .active:first-child{ border-left: 2px solid red; } .active:last-child{ border-right: 2px solid red; } .active:before{ border-top: 2px solid red; border-right: 2px solid red; border-left: 2px solid red; } .active:after{ border-left: 2px solid red; border-right: 2px solid red; border-bottom: 2px solid red; } .active:first-child, .active:last-child{ border-top: 2px solid red; border-bottom: 2px solid red; } /* Just for creating a non solid color background */ body{ height: 200px; background: -webkit-radial-gradient(center, ellipse, #400, #100); background: -moz-radial-gradient(center, ellipse, #400, #100); background: radial-gradient(center, ellipse, #400, #100); }因为z-而悬停在前一个孩子的右端或最后一个孩子的左尖端时不起作用指数问题。如果您需要无缝<div class='steps-container'> <div class='steps'>1. Step 1</div> <div class='steps active'>2. Step 2</div> <div class='steps'>3. Step 3</div> </div>功能，那么在hover元素中使用hover就像在下面的代码段中一样，可以解决它。 （感谢The Pragmatick指出这一点。）

span

.steps

屏幕截图：（将鼠标悬停在第二项上）



---

透明背景下的响应式实施

对于具有半透明框的进度跟踪栏的响应版本，请访问this pen。每个步骤/项目的宽度分配方式使得它们的总和始终是可用宽度的100％，并且每个项目总是与其他项目大小相同。

JavaScript用于以下功能:(所有这些功能都是增值功能，可以根据需要删除。请注意，删除JS后，应将相应的CSS属性放入CSS文件中。）< / p>

• 根据编号自动调整每个项目的宽度。条款中存在的项目
• 调整窗口大小时自动调整每个项目的宽度
• 使用滑块增加或减少条形高度时，自动调整项目的外观。

Answer 3

Here's some great arrows for you

＆＃13;

＆＃13;

html{
  background-color:red;
  }
div#page {
    padding-bottom: 40px;
    padding-top: 40px;
    text-align: center;
    z-index: 1;
    position: relative;
}
div.diamond, div.ribbon, div.right-arrow, div.left-arrow {
    display: inline-block;
    color: #FFFFFF;
    font-size: 22px;
    line-height: 38px;
    margin: 15px 0;
    position: relative;
    width: 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 {
    content:"";
    border-style: solid;
    border-width: 0;
    height: 0;
    position: absolute;
    width: 0;
}
div.diamond {
    background-color: #CCCCCC;
}
div.diamond:after, div.diamond:before {
    border-color: transparent #CCCCCC;
}
div.diamond:before {
    left: -19px;
    border-width: 19px 19px 19px 0;
}
div.diamond:after {
    right: -19px;
    border-width: 19px 0 19px 19px;
}
div.ribbon {
    background-color: #CCCCCC;
}
div.ribbon:before, div.ribbon:after {
    top: 6px;
    z-index: -15;
}
div.ribbon:before {
    border-color: #B2B2B2 #B2B2B2 #B2B2B2 transparent;
    border-width: 19px;
    left: -25px;
}
div.ribbon:after {
    border-color: #B2B2B2 transparent #B2B2B2 #B2B2B2;
    border-width: 19px;
    right: -25px;
}
div.right-arrow {
    background-color: #CCCCCC;
}
div.right-arrow:after, div.right-arrow:before {
    border-width: 19px 0 19px 19px;
}
div.right-arrow:before {
    border-color: #CCCCCC transparent;
    left: -19px;
}
div.right-arrow:after {
    border-color: transparent #CCCCCC;
    right: -19px;
}
div.left-arrow {
    background-color: #CCCCCC;
}
div.left-arrow:after, div.left-arrow:before {
    border-width: 19px 19px 19px 0;
}
div.left-arrow:before {
    border-color: transparent #CCCCCC;
    left: -19px;
}
div.left-arrow:after {
    border-color: #CCCCCC transparent;
    right: -19px;
}

＆＃13;

<div id="page">
    <div class="diamond">Diamond</div>
    <br>
    <div class="ribbon">Ribbon</div>
    <br>
    <div class="right-arrow">Right arrow</div>
    <br>
    <div class="left-arrow">Left arrow</div>
</div>

＆＃13;

＆＃13;

＆＃13;

SOURCE

注意

这also allows gradient backgrounds/etc

---

对于其他形状，我前几天也看到了this codepen

Answer 4

如果你想在标签之间留出透明空间，哈利目前的答案就是他们要走的路。

但是如果要删除悬停问题，可以尝试以下操作。它使用box-shadow作为伪元素而不是背景与纯色 使用 border: _px inset #___ ;

可以实现相同的效果

.li {
    height: 50px;
    width: 120px;
    background: #F5FBF1;
    display: inline-block;
    position: relative;
    margin-left: 30px;
    line-height: 50px;
    color: black;
    font-family: sans-serif;
    text-align: center;
}
.li:before, .li:after {
    content: '';
    left: -15px;
    position: absolute;
    height: 23px;
    width: 132px;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.li:before {
    border-top: 2px solid black;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    transform: skewX(30deg);
    top: 0;
    box-shadow: inset 0 8px 0 8px #F5FBF1, inset -6px 8px 0 8px #F5FBF1;
}
.li:after {
    border-bottom: 2px solid black;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    transform: skewX(-30deg);
    bottom: 0;
    box-shadow: inset 0 -8px 0 8px #F5FBF1, inset -6px -8px 0 8px #F5FBF1;
}
.li:hover {
    background: #C0EBA4;
}
.li:hover:before {
    box-shadow: inset 0 8px 0 8px #C0EBA4, inset -6px 8px 0 8px #C0EBA4;
}
.li:hover:after {
    box-shadow: inset 0 -8px 0 8px #C0EBA4, inset -6px -8px 0 8px #C0EBA4;
}

<div class="li">ONE</div>
<div class="li">TWO</div>
<div class="li">THREE</div>
<div class="li">FOUR</div>
<div class="li">FIVE</div>

<强> FIDDLE

<小时/>

最终版

您可以无缝地悬停它。它包括第一个和最后一个标签的平边。

.li {
    height: 50px;
    width: 100px;
    padding-left: 20px;
    background: #F5FBF1;
    display: inline-block;
    position: relative;
    margin-left: 20px;
    line-height: 50px;
    font-family: sans-serif;
    font-size: 15px;
}
.li:before, .li:after {
    content: '';
    left: -15px;
    position: absolute;
    height: 23px;
    width: 132px;
    border-left: 2px solid black;
    border-right: 2px solid black;
}
.li:before {
    border-top: 2px solid black;
    -webkit-transform-origin: 0% 0%;
    -moz-transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -webkit-transform: skewX(30deg);
    -moz-transform: skewX(30deg);
    -ms-transform: skewX(30deg);
    transform: skewX(30deg);
    top: 0;
    box-shadow: inset 0 8px 0 8px #F5FBF1, inset -6px 8px 0 8px #F5FBF1;
}
.li:after {
    border-bottom: 2px solid black;
    -webkit-transform-origin: 0% 100%;
    -moz-transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -webkit-transform: skewX(-30deg);
    -moz-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    transform: skewX(-30deg);
    bottom: 0;
    box-shadow: inset 0 -8px 0 8px #F5FBF1, inset -6px -8px 0 8px #F5FBF1;
}
.li:hover {
    background: #C0EBA4;
}
.li:hover:before { box-shadow: inset 0 8px 0 8px #C0EBA4, inset -6px 8px 0 8px #C0EBA4;}
.li:hover:after { box-shadow: inset 0 -8px 0 8px #C0EBA4, inset -6px -8px 0 8px #C0EBA4;}

/*First and Last styles*/
.li:first-of-type {
    left: -15px;
    box-shadow: 15px 0 0 0 #F5FBF1;
    border-left: 2px solid black;
}
.li:first-of-type:before, .li:first-of-type:after {
    left: -1px;
    width: 135px;
    border-left: 0;
}
.li:first-of-type:hover {box-shadow: 15px 0 0 0 #C0EBA4;}
.li:last-of-type {
    left: 0px;
    width: 115px;
    box-shadow: inset -2px 0 0 0 black, inset 0 -2px 0 0 black, inset 0 2px 0 0 black;
    border: 0;
}
.li:last-of-type:before, .li:last-of-type:after {
    left: -15px;
    border-right: 0;
}
.li:last-of-type:hover {background: #C0EBA4;}

<div class="li">Tab one</div>
<div class="li">Tab two</div>
<div class="li">Tab three</div>
<div class="li">Tab four</div>
<div class="li">Tab five</div>

<强> FIDDLE (final)

<强>输出：