css - 将箭头形状添加到事件选项卡

Question

如何在事件标签下添加箭头形状？

.nav-tabs2 .active { background-image:url(http://www.asiarooms.com/assets/themes/v1/images/areas/details/menu-arrow.png); background-repeat:no-repeat; background-position:bottom center; }

http://jsfiddle.net/DJHZb/13/

<div class="box-head tabs">
  <ul class="nav2 nav-tabs2">
   <li class="active">
    <a href="#0" data-toggle="tab" class="firstelement">Active Tab</a></li>
   <li><a href="#1" data-toggle="tab">Inactive Tab</a></li>
   <li><a href="#2" data-toggle="tab">Inactive Tab #2</a></li>
  </ul>
</div>

Answer 1

看看“css speech bubble”思路是一样的:http://nicolasgallagher.com/pure-css-speech-bubbles/demo

您必须使用伪 css::after 和::before(这在某些 IE 中不起作用)和边框来创建相互重叠的正方形或三 Angular 形。

示例:

.active::after {
content: "";
position: absolute;
bottom: -15px;
left: 50px;
border-width: 15px 15px 0;
border-style: solid;
border-color: #F3961C transparent;
display: block;
width: 0;
}

以下是如何创建带有框和边框的三 Angular 形的说明:http://www.sitepoint.com/pure-css3-speech-bubbles/