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

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

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

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

解决方法

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

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!