HTML – 如何制作一个:箭头后只是一个大纲?

前端之家收集整理的这篇文章主要介绍了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.f2er.com/html/227645.html

猜你在找的HTML相关文章