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

大约一年半前我在一个问题上看了一个小提琴,我正在寻找一些帮助来完成我想要它的定制.

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

有没有办法让底部的三角形只是三角形的边界而不是实心？或者是否有另一种方法来实现这种效果.

解决方法

看看小提琴 – http://jsfiddle.net/hyH48/688/

我添加了另一个伪元素.我给了它相同的边框颜色的背景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*/
}

原文地址：https://www.jb51.cc/html/227645.html