从语义上讲，我想要显示的信息是一系列用户可选择的管道阶段。
示例：
[Stage1（4项）|＆gt; Stage2（10项）|＆gt; Stage3（4项）]
我正在使用bootstrap 3和jQuery。
这是我尝试在按钮右侧放置一个三角形的CSS。
.btn:not(:last-child)::after {
z-index:2;
position: relative;
left: 19px;
display: inline-block;
/* Triange like this > */
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid grey;
content: '';
}
http://codepen.io/smartnut007/pen/LpLVje
codepen既有我想要的结果的样本，也有我尝试的非常失败。我有点想象如何使用CSS显示箭头。但是，我坚持使用其余部分。
如果你愿意放纵我，那么一些nube问题： - ）
A）箭头适用于一个简单的按钮。但是，一旦我在按钮中添加了更丰富的html，箭头的定位就会消失。什么是更明智的定位方式？
B）作为下一步，我希望突出显示活动阶段（.btn-primary或某些此类事件以将其标记为活动状态）。如何使箭头和选定的部分/按钮突出显示为相同的颜色？
C）按钮和按钮组是正确的方法吗？如果它更容易，我也会对horizontal list group等其他人开放。
无论采用何种技术，我都希望它至少适用于IE9 +和其他主流浏览器。
更新
我能够在这里实现我想要的大部分http://jsfiddle.net/rqu7vrnh/2/
答案 0 :(得分：1)
我想到了如何使用CSS进行箭头显示。但是，我 坚持其余部分。
你走在正确的轨道上。只需要几个修复就可以了。
A）箭头适用于一个简单的按钮。但是，定位了 一旦我在按钮中放入更丰富的HTML，箭头就会关闭。什么是更聪明 如何定位这个？
您的按钮应为position relative，箭头为absolute。这将有助于您将箭头精确定位在您想要的位置。
B）作为下一步，我希望突出显示活动阶段 （.btn-primary或某些此类事情将其标记为活动状态）。我该怎么做 箭头和所选部分/按钮都突出显示相同 颜色？
使用按钮上的:hover更改border-left颜色。此外，在按钮的.active上，因为突出显示活动按钮的Bootstrap方式是添加active类。你也可以在:active和:focus时这样做。
示例小提琴：http://jsfiddle.net/abhitalks/onxrj3wt/1/
示例代码段：
.btn { position: relative; }
.btn:not(:last-child)::after {
content: ''; z-index: 100;
height: 0px; width: 0px;
position: absolute;
right: -8px; top: 50%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #ddd;
}
.btn:hover { background-color: #ccc; }
.btn:active { background-color: #7ac7d2 !important; }
.btn:focus { background-color: #7ac7d2 !important; }
.btn:not(:last-child):hover::after {
border-left: 6px solid #ccc;
}
.btn:not(:last-child):active::after,
.btn:not(:last-child):focus::after
{
border-left: 6px solid #7ac7d2;
}<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="margin-top:20px; margin-left:40px;">
Attempt 1
<div class="row">
<div class="btn-group" role="group">
<a href="#" class="btn btn-default" role="button">
<h3 class="text-center">767</h3>
<p class="text-muted text-center">Stage1</p>
</a>
<a href="#" class="btn btn-default" role="button">
<h3 class="text-center">17</h3>
<p class="text-muted text-center">Stage2</p>
</a>
<a href="#" class="btn btn-default" role="button">
<h3 class="text-center">7</h3>
<p class="text-muted text-center">Stage3</p>
</a>
</div>
</div>
<div class="row"> <div>
Desired Output
<div class="row">
<img src="https://s3.amazonaws.com/warning-public-resources/pipeliene-example.png" height="100"></img>
</div>
</div>
注意：以上示例是一个快速演示。不考虑元素的特异性。在您的生产代码中，您应该仔细查看覆盖Bootstrap规则的规则的特殊性，以避免!important。
答案 1 :(得分：1)
将CSS更改为snipet以下。使用btn-primary类将激活按钮。
QUARTER答案 2 :(得分：1)
这可能有所帮助或给你一些想法。
body,
html {
margin-top: 20px;
margin-left: 40px;
}
button.btn.btn-cycle {
height: 150px;
width: 150px;
border-radius: 0;
border: none;
background: white;
border-top: 6px solid #f5f5f5;
border-left: 6px solid #f5f5f5;
border-bottom: 6px solid #f5f5f5;
font-size: 20px;
}
button.btn.btn-cycle:last-child {
border-right: 6px solid #f5f5f5;
}
button.btn.btn-cycle:last-child:before {
content: "";
position: absolute;
top: 33.33%;
left: 100%;
width: 0px;
height 0px;
border-top: 20px solid transparent;
border-left: 20px solid #f5f5f5;
border-bottom: 20px solid transparent;
}
button.btn.btn-cycle:not(:first-child):after {
content: "";
position: absolute;
top: 33.33%;
left: 0;
width: 0px;
height 0px;
border-top: 20px solid transparent;
border-left: 20px solid #f5f5f5;
border-bottom: 20px solid transparent;
}
button.btn.btn-cycle:first-child {
border-left: 6px solid #f5f5f5;
}
button.btn .btn-span {
font-weight: 800;
font-size: 10px;
display: block;
}
button.btn.btn-cycle:hover {
background: teal;
color: white;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-cycle">187 <span class="btn-span">ACTIVE</span>
</button>
<button type="button" class="btn btn-cycle">112 <span class="btn-span">UNACKNOWLEDGED</span>
</button>
<button type="button" class="btn btn-cycle">11 <span class="btn-span">ACKNOWLEDGED</span>
</button>
</div>
</div>
答案 3 :(得分：1)
您需要先了解结构。根据codepen中的图像，它显示您希望在具有不同规格边框的行中进行潜水。你需要了解按照图像放置边框。
无论如何我试着回答你的问题但是结帐Abhitalks回答并理解了事情。 CodePen：http://codepen.io/anon/pen/LpLpxM
尝试以下，
.wrapper {
margin-top:20px;
border-top: 9px solid #F0F0F2;
border-bottom: 9px solid #F0F0F2;
height:108px;
width:334px;
}
.box{
background-color: #fff;
float: left;
height: 90px;
padding-top: 22px;
width: 100px;
text-align:center;
border-right: 2px solid #F0F0F2;
font-size:20px;
}
.box.first {
border-left: 9px solid #F0F0F2;
width:110px;
}
.box.active {
background-color: #82C8D2;
}
.box::after {
z-index: 2;
position: relative;
left: 53px;
bottom:34px;
display: inline-block;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid #F0F0F2;
content: '';
}
.box.active::after {
border-left: 6px solid #82C8D2;
left: 52px;
}
.text-small {
display: block;
font-size: 8px;
font-weight: bold;
text-transform: uppercase;
}<div class="wrapper">
<div id="div1" class="box first grid-box1">187
<span class="text-small">Active</span>
</div>
<div id="div2" class="box grid-box2">112
<span class="text-small">Unacknowledge</span>
</div>
<div id="div3" class="box grid-box3 active">11
<span class="text-small">Acknowledge</span>
</div>
</div>