如何製作一個：箭頭之後只是一個大綱？

Question

我已經看了一個小提琴大約一年半前發佈的小提琴，我正在尋找一些幫助來完成自定義它，以我想要它。

http://jsfiddle.net/hyH48/641/

有沒有一種方法，使底部只是一個三角形，而不是實心的邊境三角嗎？或者還有另一種方法，我將不得不採取措施來實現這種效果。

Answer 1

看看部份小提琴 - http://jsfiddle.net/hyH48/688/

我已經添加了另一個僞元素。我給了它與元素background-colora相同的邊框顏色，並將其放置在那裏已經存在的頂部。

下面是情況下，HTML和CSS，你不能看到它：

HTML：

<div id="mybox"> 
    This will be my tooltip 
</div>​ 

CSS：

#mybox { 
    position: relative; 
    width: XXXpx; 
    height: YYYpx; 
    border: 1px solid #000; 
    border-radius: 4px; 
    background-color: #fff; 
} 

#mybox:after, 
#mybox:before { 
    content: ""; 
    border-style: solid; 
    border-width: 10px; 
    width: 0; 
    height: 0; 
    position: absolute; 
    top: 100%; 
    left: 20px 
} 

#mybox:before { 
    border-color: #000 transparent transparent; /*non transparent color same as #mybox's border-color*/ 
} 

#mybox:after { 
    margin-top: -2px; 
    border-color: #fff transparent transparent; /*non transparent color same as #mybox's background-color*/ 
} 

Answer 2

看我做了什麼：jsFiddle。

您可以使用：before僞元素來執行三角形的邊框和a：after來填充三角形。你只需要對after元素的位置和邊界值進行一些調整，使其變小。

#mybox { 
    width:200px; 
    height:30px; 
    border-style:solid; 
    border-width:thin; 
    border-color:#000066; 
    border-radius: 4px; 
    position:relative; 
} 

#mybox:after{ // Our small triangle to fill the space 
    content:""; 
    border-color: #fff transparent transparent; 
    border-style:solid; 
    border-width:9px; 
    width:0; 
    height:0; 
    position:absolute; 
    bottom:-18px; 
    left:21px 
} 

#mybox:before{ 
    content:""; 
    border-color: #000066 transparent transparent; 
    border-style:solid; 
    border-width:10px; 
    width:0; 
    height:0; 
    position:absolute; 
    bottom:-20px; 
    left:20px 
} 
​