如何使只有CSS这个箭头？如何使只有CSS这个箭头？(How to make this arrow

2019-05-10 10:25发布

站内文章 / 移动开发

53 0

叛逆

女 | 书童

私信

我建立一个精灵般的订购过程，其中我有这样的菜单：

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

一个人如何只使用CSS使这个箭头？：

目前我正在使用一些的div和图像实现我的目标：

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

左图：

正确的图像：

我发现了一个SO答案，做到这一点的一部分：箭盒用CSS ，但我在与左侧的缩进的麻烦。

如果您有关于如何做到这一点更好的想法，请让我知道！

Answer 1:

如果箭头之间的空间并不需要是透明的（ 这是纯色 ），您可以使用: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 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:

下面是使用CSS3特性了整个事情的另一种方法。使用这种方法（和主要的原因，用于将一个单独的答案的一个）的一个优点是，在箭头之间的空间可以是透明的。

基本上实现如下：

有一个div每个步骤/项目，它包含了需要显示的文本。让我们说的height如此div是x （在这个例子中50像素）。
两个伪元素（ :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 { 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>

注意： hover在上面的代码片段上第一胎的右尖或最后一个孩子，因为z-index的问题的左尖徘徊时不起作用。如果您需要无缝hover功能，那么使用span内.steps元素就像下面的代码片段会解决它。（感谢的Pragmatick指出这一点）。

 .steps { height: 50px; width: 150px; text-align: center; line-height: 50px; position: relative; margin: 10px 0px 10px 20px; display: inline-block; } .steps span { position: relative; z-index: 2; } .steps:before, .steps:after { content: ''; position: absolute; left: 0px; width: 150px; height: 25px; } .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:first-child:before, .steps:first-child:after { border-left: none; } .steps:last-child:before, .steps:last-child:after { border-right: none; } .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; } .steps:first-child:hover:before, .steps:first-child:hover:after { border-left: none; } .steps:last-child:hover:before, .steps:last-child:hover:after { border-right: none; } /* 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'> <span>1. Step 1</span> </div> <div class='steps active'> <span>2. Step 2</span> </div> <div class='steps'> <span>3. Step 3</span> </div> </div>

截图：（与第二项悬停）

回应的方式落实与透明背景：

对于半透明的盒子进度跟踪条的响应版本，请访问此笔。每个步骤/项目的宽度以这样一种方式分配，他们的总和始终是可用的宽度的100％，并且每个itemis总是相同大小的其他人。

JavaScript是用于以下特点：（所有这些功能都增值，并且可以根据需要被移除注意，当JS被删除，相应的CSS属性应放入CSS文件。）

自动调整取决于没有每个项目的宽度。存在于所述杆件
当窗口大小自动调整各个项目的宽度
自动调整，当杆的高度，通过使用滑动件升高或降低的物品的外观。

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>

资源

注意

这还允许梯度的背景/等

对于其他的形状，我看到这个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>

小提琴

最终版本

您可以无缝地悬停它。它包括第一和最后的选项卡的扁平边缘。

 .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（最终）

输出：