如何在CSS中制作这个箭头？

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

活动页面呈绿色（在这种情况下，模型）。

如何只使用CSS来制作这个箭头？

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

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

左图：

正确的形象：

我find了一个这样做的SO回答： 带有CSS的箭头框 ，但是我在左边的缩进处遇到麻烦。

如果您对如何做到这一点有更好的了解，请让我知道！

Answer 1

如果箭头之间的空间不需要透明（ 纯色 ），则可以使用:before和:after创build边（ DOM中没有新元素 ）

基本上，它创build与我们想要的边界旋转的广场，并相应地放置它们

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

Answer 2

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

基本上执行如下：

1. 每个步骤/项目都有一个div ，它包含需要显示的文本。 让我们说这个div的height是x （在这个例子中是50px）。
2. 两个伪元素（ :before和:after ）被创build与他们的width相同的父div和height一半（ x/2 ）的父。 :before元素没有border-bottom而:after元素没有border-top来避免在shape的中间出现一条线（平行于x轴）。
3. 这两个伪元素然后在相反的方向上skew变形，并以这样的方式定位，使得它们彼此正下方，并因此最终形成所需的形状。
4. 伪元素被赋予一个负z-index来将它们推到父div （以及它的文本）之后。
5. first-child last-child元素和last-child元素被稍微修改（ left位置，伪元素的border ，父div background和border ）以实现直线边。
6. 我们可以为活动元素添加一个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); } 

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

Answer 3

这是一些伟大的箭头给你

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

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

Answer 4

如果你希望标签之间有透明的空间，Harry现在的答案就是要走的路。

但是，如果您想要移除hover问题，则可以尝试以下操作。 它使用了box-shadow而不是纯色的背景。
使用border: _px inset #___ ;可以达到同样的效果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>