带有“下一个”箭头的纯HTML / CSS列表菜单

Question

我试图生成一个纯HTML / CSS菜单，箭头指向右边。 只要处于活动状态是第一个选项卡，一切看起来就很好（ http://jsfiddle.net/q03wma6u/ ）。 但是，当活动类移动到第二个选项卡时，边框和箭头没有一起定位（ http://jsfiddle.net/q03wma6u/1/ ）。

有没有一种方法可以仅使用HTML / CSS生成此菜单？

 ol.tabs { -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; margin: 0; padding: 0; list-style: none; display: table; table-layout: fixed; width: 100%; } ol.tabs li { position: relative; display: table-cell; overflow: hidden; margin: 0; padding: 0; text-align: center; text-transform: uppercase; background-color: #ccc; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; -webkit-transition: background-color 0.3s linear; transition: background-color 0.3s linear; } ol.tabs li:after { content: " "; display: block; position: absolute; top: 4px; right: 6px; width: 32px; height: 32px; border: 1px solid #4a4a4a; border-bottom: none; border-left: none; border-radius: 2px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } ol.tabs li:last-child:after { border: none; } ol.tabs li:last-child a:before { border: none; } ol.tabs li.active a { background-color: #fff; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; -webkit-transition: background-color 0.3s linear; transition: background-color 0.3s linear; } ol.tabs li.active a:before { content: " "; display: block; position: absolute; top: 0px; right: 0px; width: 0px; height: 0px; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent transparent transparent #fff; -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } ol.tabs li.active a:after { content: " "; display: block; position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; border-style: solid; border-width: 20px 0 20px 20px; border-color: transparent transparent transparent #ccc; -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } ol.tabs li:first-child a:after { border: none; } ol.tabs li a { display: block; padding: 10px 0px; margin-right: 20px; color: #4a4a4a; font-weight: bold; text-decoration: underline; } ol.tabs li a.disabled { cursor: initial; font-weight: normal; text-decoration: none; } ol.tabs li a.disabled:hover { text-decoration: none; } 

 <ol class="tabs"> <li class="step1 active"><a href="#" data-next="step2" class="disabled">Step 1</a></li> <li class="step2"><a href="#" data-next="step3" class="disabled">Step 2</a></li> <li class="step3"><a href="#" data-next="ste4" class="disabled">Step 3</a></li> <li class="step4"><a href="#" data-next="step5" class="disabled">Step 4</a></li> </ol> 

Answer 1

这个怎么样：

 .tabs { list-style: none; padding: 0; margin: 0; } .tabs a { display: table-cell; text-align: center; vertical-align: middle; color: #4a4a4a; text-decoration: none; text-transform: uppercase; } .tabs > li { float: left; position: relative; border: 1px solid #7B7B7B; border-right: none; width: 140px; height: 50px; background: #cccccc; cursor: pointer; display: table; } .tabs > li:before { position: absolute; top: 50%; right: 0; margin: -15px -13px; border-top: solid 1px #7B7B7B; border-right: solid 1px #7B7B7B; width: 25px; /* .tabs > li height/2 */ height: 29px; /* .tabs > li height/sqrt(3) */ transform: rotate(30deg) skewY(30deg); /* create a rhombus */ -ms-transform: rotate(30deg) skewY(30deg); /* IE 9 */ -webkit-transform: rotate(30deg) skewY(30deg); /* Safari and Chrome */ background: #cccccc; /* 49.1deg = atan(1.15) = atan(height/width) */ /* percentages are 100 - .tabs > li percentages*/ content: ''; z-index: 1; } .tabs > li:after { position: absolute; top: 0; right: 0; bottom: 0; width: 40px; background: #cccccc; content: ''; z-index: 2; } .tabs > li.active, .tabs > li.active:before, .tabs > li.active:after { background: #ffffff; } 

 <ol class="tabs"> <li class="step1"><a href="#" data-next="step2" class="disabled">Step 1</a></li> <li class="step2 active"><a href="#" data-next="step3" class="disabled">Step 2</a></li> <li class="step3"><a href="#" data-next="ste4" class="disabled">Step 3</a></li> <li class="step4"><a href="#" data-next="step5" class="disabled">Step 4</a></li> </ol> 

无边框和方形端框为末端li ：

 .tabs { list-style: none; padding: 0; margin: 0; } .tabs a { display: table-cell; text-align: center; vertical-align: middle; color: #4a4a4a; text-decoration: none; text-transform: uppercase; } .tabs > li { float: left; position: relative; border-right: none; width: 140px; height: 50px; background: #cccccc; cursor: pointer; display: table; } .tabs > li:before { position: absolute; top: 50%; right: 0; margin: -15px -13px; border-top: solid 1px #7B7B7B; border-right: solid 1px #7B7B7B; width: 25px; height: 29px; transform: rotate(30deg) skewY(30deg); -ms-transform: rotate(30deg) skewY(30deg); -webkit-transform: rotate(30deg) skewY(30deg); background: #cccccc; content: ''; z-index: 1; } .tabs > li:after { position: absolute; top: 0; right: 0; bottom: 0; width: 40px; background: #cccccc; content: ''; z-index: 2; } .tabs > li.active, .tabs > li.active:before, .tabs > li.active:after { background: #ffffff; } .tabs > li:last-child:before, .tabs > li:last-child:after {display:none; content:none;} 

 <ol class="tabs"> <li class="step1"><a href="#" data-next="step2" class="disabled">Step 1</a></li> <li class="step2 active"><a href="#" data-next="step3" class="disabled">Step 2</a></li> <li class="step3"><a href="#" data-next="ste4" class="disabled">Step 3</a></li> <li class="step4"><a href="#" data-next="step5" class="disabled">Step 4</a></li> </ol> 

Answer 2

CSS

 .breadcrumb { list-style: none; overflow: hidden; font: 18px Helvetica, Arial, Sans-Serif; } .breadcrumb li { float: left; } .breadcrumb li a { color: white; text-decoration: none; padding: 10px 0 10px 55px; background: brown; /* fallback color */ background: hsla(34,85%,35%,1); position: relative; display: block; float: left; } .breadcrumb li a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 30px solid hsla(34,85%,35%,1); position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadcrumb li:first-child a { padding-left: 10px; } .breadcrumb li a:hover { background: hsla(34,85%,25%,1); } .breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; } 

 <ul class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Vehicles</a></li> <li><a href="#">Vans</a></li> <li><a href="#">Camper Vans</a></li> </ul> 

如打击链接中所述更改您的css

https://css-tricks.com/examples/TriangleBreadcrumbs/