如何在CSS中制作此箭头？

Question

如何在CSS中制作此箭头？

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

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

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

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

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

左图： 

正确的形象：

我找到了一个SO答案，其中包含了一部分： 带有CSS的箭盒，但是我在左边的缩进时遇到了麻烦。

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

Answer 1

这是使用CSS3功能的整个方法的替代方法。使用此方法的一个优点（以及添加单独答案的主要原因之一）是箭头之间的空间可以是透明的。基本上实现如下：div每个步骤/项目都有一个，它包含需要显示的文本。让我们说height这div是x（在这个例子中50px）。两个伪元素（:before和:after）与它们的创建width相同的父div和height作为半（x/2父）。该:before元件不具有border-bottom而:after元件不具有border-top以避免出现在形状（平行于x轴）的中间的线。然后，这两个伪元件skew在相反的方向上变换，并且以这样的方式定位，使得它们直接在彼此下方，从而最终形成所需的形状。伪元素被赋予负数z-index以将它们推到父元素后面div（因此它的文本）。的first-child和last-child元件被稍微修改（left位置，border伪元素，的background和border的母体div）来实现直边。我们可以active为活动元素和hover效果添加一个类，如下面的示例所示。.steps&nbsp;{ &nbsp;&nbsp;height:&nbsp;50px; &nbsp;&nbsp;width:&nbsp;150px; &nbsp;&nbsp;text-align:&nbsp;center; &nbsp;&nbsp;line-height:&nbsp;50px; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;margin:&nbsp;10px&nbsp;0px&nbsp;10px&nbsp;20px; &nbsp;&nbsp;display:&nbsp;inline-block;}.steps:before,.steps:after&nbsp;{ &nbsp;&nbsp;content:&nbsp;''; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;left:&nbsp;0px; &nbsp;&nbsp;width:&nbsp;150px; &nbsp;&nbsp;height:&nbsp;25px; &nbsp;&nbsp;z-index:&nbsp;-1;}.steps:before&nbsp;{ &nbsp;&nbsp;top:&nbsp;-2px; &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;background:&nbsp;lightblue; &nbsp;&nbsp;-moz-transform:&nbsp;skew(30deg); &nbsp;&nbsp;-webkit-transform:&nbsp;skew(30deg); &nbsp;&nbsp;transform:&nbsp;skew(30deg);}.steps:after&nbsp;{ &nbsp;&nbsp;bottom:&nbsp;-2px; &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;background:&nbsp;lightblue; &nbsp;&nbsp;-moz-transform:&nbsp;skew(-30deg); &nbsp;&nbsp;-webkit-transform:&nbsp;skew(-30deg); &nbsp;&nbsp;transform:&nbsp;skew(-30deg);}.steps:last-child&nbsp;{ &nbsp;&nbsp;background:&nbsp;lightblue; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;margin-left:&nbsp;38px;}.steps:first-child&nbsp;{ &nbsp;&nbsp;background:&nbsp;lightblue; &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;margin-right:&nbsp;18px;}.steps:first-child:before,.steps:first-child:after&nbsp;{ &nbsp;&nbsp;left:&nbsp;18px;}.steps:last-child:before,.steps:last-child:after&nbsp;{ &nbsp;&nbsp;left:&nbsp;-18px;}/*&nbsp;Hover&nbsp;Styles&nbsp;*/.steps:first-child:hover,.steps:last-child:hover,.steps:hover:before,.steps:hover:after&nbsp;{ &nbsp;&nbsp;background:&nbsp;lightgreen;}.steps:first-child:hover&nbsp;{ &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;green;}.steps:last-child:hover&nbsp;{ &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;green;}.steps:hover:before&nbsp;{ &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;green; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;green; &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;green;}.steps:hover:after&nbsp;{ &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;green; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;green; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;green;}.steps:first-child:hover,.steps:last-child:hover&nbsp;{ &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;green; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;green;}/*&nbsp;Active&nbsp;Styles&nbsp;*/.active:first-child,.active:last-child,.active:before,&nbsp;.active:after{ &nbsp;&nbsp;background:&nbsp;bisque;}.active:first-child{ &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;red;}.active:last-child{ &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;red;}.active:before{ &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;red; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;red; &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;red;}.active:after{ &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;red; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;red; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;red;}.active:first-child,&nbsp;.active:last-child{ &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;red; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;red;}/*&nbsp;Just&nbsp;for&nbsp;creating&nbsp;a&nbsp;non&nbsp;solid&nbsp;color&nbsp;background&nbsp;*/body{ &nbsp;&nbsp;height:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;-webkit-radial-gradient(center,&nbsp;ellipse,&nbsp;#400,&nbsp;#100); &nbsp;&nbsp;background:&nbsp;-moz-radial-gradient(center,&nbsp;ellipse,&nbsp;#400,&nbsp;#100); &nbsp;&nbsp;background:&nbsp;radial-gradient(center,&nbsp;ellipse,&nbsp;#400,&nbsp;#100);}<div&nbsp;class='steps-container'> &nbsp;&nbsp;<div&nbsp;class='steps'>1.&nbsp;Step&nbsp;1</div> &nbsp;&nbsp;<div&nbsp;class='steps&nbsp;active'>2.&nbsp;Step&nbsp;2</div> &nbsp;&nbsp;<div&nbsp;class='steps'>3.&nbsp;Step&nbsp;3</div></div>注：在hover第一个孩子的右尖或最后一个孩子，因为z-index的问题的左尖盘旋当在上面的代码中不起作用。如果您需要无缝hover功能，那么在下面的代码片段中使用元素span内部.steps就可以解决它。（感谢The Pragmatick指出这一点）。.steps&nbsp;{ &nbsp;&nbsp;height:&nbsp;50px; &nbsp;&nbsp;width:&nbsp;150px; &nbsp;&nbsp;text-align:&nbsp;center; &nbsp;&nbsp;line-height:&nbsp;50px; &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;margin:&nbsp;10px&nbsp;0px&nbsp;10px&nbsp;20px; &nbsp;&nbsp;display:&nbsp;inline-block;}.steps&nbsp;span&nbsp;{ &nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;z-index:&nbsp;2;}.steps:before,.steps:after&nbsp;{ &nbsp;&nbsp;content:&nbsp;''; &nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;left:&nbsp;0px; &nbsp;&nbsp;width:&nbsp;150px; &nbsp;&nbsp;height:&nbsp;25px;}.steps:before&nbsp;{ &nbsp;&nbsp;top:&nbsp;-2px; &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;background:&nbsp;lightblue; &nbsp;&nbsp;-moz-transform:&nbsp;skew(30deg); &nbsp;&nbsp;-webkit-transform:&nbsp;skew(30deg); &nbsp;&nbsp;transform:&nbsp;skew(30deg);}.steps:after&nbsp;{ &nbsp;&nbsp;bottom:&nbsp;-2px; &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;background:&nbsp;lightblue; &nbsp;&nbsp;-moz-transform:&nbsp;skew(-30deg); &nbsp;&nbsp;-webkit-transform:&nbsp;skew(-30deg); &nbsp;&nbsp;transform:&nbsp;skew(-30deg);}.steps:first-child:before,.steps:first-child:after&nbsp;{ &nbsp;&nbsp;border-left:&nbsp;none;}.steps:last-child:before,.steps:last-child:after&nbsp;{ &nbsp;&nbsp;border-right:&nbsp;none;}.steps:last-child&nbsp;{ &nbsp;&nbsp;background:&nbsp;lightblue; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;margin-left:&nbsp;38px;}.steps:first-child&nbsp;{ &nbsp;&nbsp;background:&nbsp;lightblue; &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;blue; &nbsp;&nbsp;margin-right:&nbsp;18px;}.steps:first-child:before,.steps:first-child:after&nbsp;{ &nbsp;&nbsp;left:&nbsp;18px;}.steps:last-child:before,.steps:last-child:after&nbsp;{ &nbsp;&nbsp;left:&nbsp;-18px;}/*&nbsp;Hover&nbsp;Styles&nbsp;*/.steps:first-child:hover,.steps:last-child:hover,.steps:hover:before,.steps:hover:after&nbsp;{ &nbsp;&nbsp;background:&nbsp;lightgreen;}.steps:first-child:hover&nbsp;{ &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;green;}.steps:last-child:hover&nbsp;{ &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;green;}.steps:hover:before&nbsp;{ &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;green; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;green; &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;green;}.steps:hover:after&nbsp;{ &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;green; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;green; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;green;}.steps:first-child:hover,.steps:last-child:hover&nbsp;{ &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;green; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;green;}.steps:first-child:hover:before,.steps:first-child:hover:after&nbsp;{ &nbsp;&nbsp;border-left:&nbsp;none;}.steps:last-child:hover:before,.steps:last-child:hover:after&nbsp;{ &nbsp;&nbsp;border-right:&nbsp;none;}/*&nbsp;Active&nbsp;Styles&nbsp;*/.active:first-child,.active:last-child,.active:before,.active:after&nbsp;{ &nbsp;&nbsp;background:&nbsp;bisque;}.active:first-child&nbsp;{ &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;red;}.active:last-child&nbsp;{ &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;red;}.active:before&nbsp;{ &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;red; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;red; &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;red;}.active:after&nbsp;{ &nbsp;&nbsp;border-left:&nbsp;2px&nbsp;solid&nbsp;red; &nbsp;&nbsp;border-right:&nbsp;2px&nbsp;solid&nbsp;red; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;red;}.active:first-child,.active:last-child&nbsp;{ &nbsp;&nbsp;border-top:&nbsp;2px&nbsp;solid&nbsp;red; &nbsp;&nbsp;border-bottom:&nbsp;2px&nbsp;solid&nbsp;red;}/*&nbsp;Just&nbsp;for&nbsp;creating&nbsp;a&nbsp;non&nbsp;solid&nbsp;color&nbsp;background&nbsp;*/body&nbsp;{ &nbsp;&nbsp;height:&nbsp;200px; &nbsp;&nbsp;background:&nbsp;-webkit-radial-gradient(center,&nbsp;ellipse,&nbsp;#400,&nbsp;#100); &nbsp;&nbsp;background:&nbsp;-moz-radial-gradient(center,&nbsp;ellipse,&nbsp;#400,&nbsp;#100); &nbsp;&nbsp;background:&nbsp;radial-gradient(center,&nbsp;ellipse,&nbsp;#400,&nbsp;#100);}<div&nbsp;class='steps-container'> &nbsp;&nbsp;<div&nbsp;class='steps'> &nbsp;&nbsp;&nbsp;&nbsp;<span>1.&nbsp;Step&nbsp;1</span> &nbsp;&nbsp;</div> &nbsp;&nbsp;<div&nbsp;class='steps&nbsp;active'> &nbsp;&nbsp;&nbsp;&nbsp;<span>2.&nbsp;Step&nbsp;2</span> &nbsp;&nbsp;</div> &nbsp;&nbsp;<div&nbsp;class='steps'> &nbsp;&nbsp;&nbsp;&nbsp;<span>3.&nbsp;Step&nbsp;3</span> &nbsp;&nbsp;</div></div>具有透明背景的响应式实施：对于具有半透明框的进度跟踪栏的响应版本，请访问此笔。每个步骤/项目的宽度以这样的方式分配，即它们的总和始终是可用宽度的100％，并且每个项目总是与其他项目的大小相同。JavaScript用于以下功能:(所有这些功能都是增值功能，可以根据需要删除。请注意，删除JS后，应将相应的CSS属性放入CSS文件中。）根据编号自动调整每个项目的宽度。栏中存在的项目调整窗口大小时自动调整每个项目的宽度使用滑块增加或减少条的高度时，自动调整项目的外观。

Answer 2

这里有一些很棒的箭头html{ &nbsp;&nbsp;background-color:red; &nbsp;&nbsp;}div#page&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;padding-bottom:&nbsp;40px; &nbsp;&nbsp;&nbsp;&nbsp;padding-top:&nbsp;40px; &nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;}div.diamond,&nbsp;div.ribbon,&nbsp;div.right-arrow,&nbsp;div.left-arrow&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#FFFFFF; &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;22px; &nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;38px; &nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;15px&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;200px;}div.diamond:before,&nbsp;div.diamond:after,&nbsp;div.ribbon:before,&nbsp;div.ribbon:after,&nbsp;div.right-arrow:before,&nbsp;div.right-arrow:after,&nbsp;div.left-arrow:before,&nbsp;div.left-arrow:after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;content:""; &nbsp;&nbsp;&nbsp;&nbsp;border-style:&nbsp;solid; &nbsp;&nbsp;&nbsp;&nbsp;border-width:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;0;}div.diamond&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#CCCCCC;}div.diamond:after,&nbsp;div.diamond:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;transparent&nbsp;#CCCCCC;}div.diamond:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;-19px; &nbsp;&nbsp;&nbsp;&nbsp;border-width:&nbsp;19px&nbsp;19px&nbsp;19px&nbsp;0;}div.diamond:after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;-19px; &nbsp;&nbsp;&nbsp;&nbsp;border-width:&nbsp;19px&nbsp;0&nbsp;19px&nbsp;19px;}div.ribbon&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#CCCCCC;}div.ribbon:before,&nbsp;div.ribbon:after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;6px; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;-15;}div.ribbon:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;#B2B2B2&nbsp;#B2B2B2&nbsp;#B2B2B2&nbsp;transparent; &nbsp;&nbsp;&nbsp;&nbsp;border-width:&nbsp;19px; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;-25px;}div.ribbon:after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;#B2B2B2&nbsp;transparent&nbsp;#B2B2B2&nbsp;#B2B2B2; &nbsp;&nbsp;&nbsp;&nbsp;border-width:&nbsp;19px; &nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;-25px;}div.right-arrow&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#CCCCCC;}div.right-arrow:after,&nbsp;div.right-arrow:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-width:&nbsp;19px&nbsp;0&nbsp;19px&nbsp;19px;}div.right-arrow:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;#CCCCCC&nbsp;transparent; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;-19px;}div.right-arrow:after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;transparent&nbsp;#CCCCCC; &nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;-19px;}div.left-arrow&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#CCCCCC;}div.left-arrow:after,&nbsp;div.left-arrow:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-width:&nbsp;19px&nbsp;19px&nbsp;19px&nbsp;0;}div.left-arrow:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;transparent&nbsp;#CCCCCC; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;-19px;}div.left-arrow:after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;border-color:&nbsp;#CCCCCC&nbsp;transparent; &nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;-19px;}<div&nbsp;id="page"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="diamond">Diamond</div> &nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="ribbon">Ribbon</div> &nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="right-arrow">Right&nbsp;arrow</div> &nbsp;&nbsp;&nbsp;&nbsp;<br> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="left-arrow">Left&nbsp;arrow</div></div>资源注意这也允许渐变背景/等对于其他形状，我前几天也看到了这个编码器