添加箭頭形到活動標籤

如何在活動標籤下添加箭頭形狀？添加箭頭形到活動標籤

.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>

來源

2013-01-12 Robert Chan

看看「CSS講話泡沫」的思想是一致的：http://nicolasgallagher.com/pure-css-speech-bubbles/demo

你要惹僞CSS ::後::之前（這在某些IE中不起作用）和邊界創建一個相互重疊的正方形或三角形。

實施例：

.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; 
}

下面是一個說明如何創建具有一個盒子和邊界三角形：http://www.sitepoint.com/pure-css3-speech-bubbles/

來源

2013-01-12 15:16:12

我期待有底部中心箭頭圖像所需的結果：http://www.asiarooms.com/en/malaysia/kuala_lumpur/264278-the_courtyard_boutique_hotel.html –

@RobertChan是，到目前爲止，您嘗試了哪些關於我給你的鏈接和例子？ –

僞元素在IE中工作還是需要相對位置？我在google上看到同樣的例子，但樣本表示它需要相對位置。 –

對於這樣一個代碼（它使用自舉）：

<body> 
    <div class="panel panel-primary"> 
    <div class="panel-heading" style="font-size:large"> 
     Klujo 
    </div> 

    <div class="panel-body"> 
     <div class="wizard"> 
      <a > 
       Step 1<br> 
     Authorize the app 
      </a> 
      <a class="active"> 
       Step 2<br> 
     Post your jobs 
      </a> 

     </div> 
    </div> 

    </div> 
</body>

你可以使用像這樣的css：

.wizard a { 
    background: #efefef; 
    display: inline-block; 
    margin-right: 5px; 
    min-width: 150px; 
    outline: none; 
    padding: 10px 40px 10px; 
    position: relative; 
    text-decoration: none; 
} 

.wizard .active { 
    background: #007ACC; 
    color: #fff; 
} 

.wizard a:before { 
    width: 0; 
    height: 0; 
    border-top: 25px inset transparent; 
    border-bottom: 35px inset transparent; 
    border-left: 20px solid #fff; 
    position: absolute; 
    content: ""; 
    top: 0; 
    left: 0; 
} 

.wizard a:after { 
    width: 0; 
    height: 0; 
    border-top: 35px inset transparent; 
    border-bottom: 25px inset transparent; 
    border-left: 21px solid #efefef; 
    position: absolute; 
    content: ""; 
    top: 0; 
    right: -20px; 
    z-index: 2; 
} 

.wizard a:first-child:before, 
.wizard a:last-child:after { 
    border: none; 
} 

.wizard a.active:after { 
    border-left: 21px solid #007ACC; 
}

得到

來源

2015-06-03 10:10:42

</body> 
    <style> 
    .tool { 
    position: relative; 
    display: inline-block; 
    border-bottom: 1px dotted red; 
    } 

    .tool .text { 
    visibility: hidden; 
    width: 100%; 
    background-color: blue; 
    color: white; 
    text-align: center; 
    border-radius: 5px; 
    padding: 5px 0; 
    position: absolute; 

    top: -1px; 
    left: 110%; 
    } 

    .tool .text::after { 
    content: ""; 
     position: absolute; 
     top: 10%; 
     right: 99%; 
     margin-top: -2px; 
     border-width: 5px; 
     border-style: solid; 
     border-color: transparent blue transparent transparent; 
     } 
    .tool:hover .text { 
    visibility: visible; 
     } 
    </style> 

    <div class="tool">Mouse Hover 
     <span class="text">I Can pop up on the right side of these words</div> 
     </body>

來源

2017-02-12 18:49:23

你能解釋一下你的代碼如何回答這個問題嗎？ – afxentios

添加箭頭形到活動標籤

回答

相關問題