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

概述大约一年半前我在一个问题上看了一个小提琴,我正在寻找一些帮助来完成我想要它的定制. http://jsfiddle.net/hyH48/641/ 有没有办法让底部的三角形只是三角形的边界而不是实心？或者是否有另一种方法来实现这种效果. 看看小提琴 – http://jsfiddle.net/hyH48/688/ 我添加了另一个伪元素.我给了它相同的边框颜色的背景colora元素,并放在已经存在的那 大约一年半前我在一个问题上看了一个小提琴,我正在寻找一些帮助来完成我想要它的定制.

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

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

解决方法 看看小提琴 – @L_404_1@

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

总结

以上是内存溢出为你收集整理的HTML – 如何制作一个：箭头后只是一个大纲？全部内容，希望文章能够帮你解决HTML – 如何制作一个：箭头后只是一个大纲？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。