html – 如何使CSS中的箭头？

概述我正在建立一个类似巫师的订购流程,我在这里有这个菜单： 活动页面为绿色(在这种情况下为模型). 如何使用CSS只做这个箭头？ 目前我通过使用几个div和图像来实现我的目标： <div class="menuItem"> <div></div> <!-- The left image --> <div>Varianten</div> <div></div> <!-- The 我正在建立一个类似巫师的订购流程,我在这里有这个菜单：

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

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

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

<div >    <div></div> <!-- The left image -->    <div>Varianten</div>    <div></div> <!-- The right image --></div>

左图：

正确的形象：

我发现了一个SO答案,其中的一部分是：
Arrow Box with CSS,但是我在左边的缩进方面遇到麻烦.

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

@H_404_20@解决方法 如果箭头之间的空格不需要透明(它是纯色),可以使用：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>

总结

以上是内存溢出为你收集整理的html – 如何使CSS中的箭头？全部内容，希望文章能够帮你解决html – 如何使CSS中的箭头？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。