html - 如何使 :after 箭头只是一个轮廓？

Question

我看过大约一年半前在一个问题上发布的小提琴，我正在寻找一些帮助来完成对它的定制，使其符合我的要求。

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

有没有办法让底部的三角形只是三角形的边框而不是实心？还是我必须采取另一种方法才能达到这种效果。

Answer 1

看看我做了什么：jsFiddle。

您可以使用 :before 伪元素来执行三角形的边框，并使用 :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
}
​

Answer 2

看看这个小提琴 - http://jsfiddle.net/hyH48/688/

我添加了另一个伪元素。我给了它与元素背景颜色相同的边框颜色，并放置在已经存在的元素之上。

这是 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*/
}