如何制作一个：箭头之后只是一个大纲？

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 
} 
​