如何制作一个:箭头后只是一个轮廓?

时间:2012-07-29 00:15:31

标签: html css border

我已经看了一个半年前在一个问题上发布的小提琴,我正在寻找一些帮助来完成我想要它的定制。

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

有没有办法让底部的三角形只是三角形的边框而不是实心?或者我是否需要采取另一种方法来实现这种效果。

2 个答案:

答案 0 :(得分:8)

看看我做了什么: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
}
​

答案 1 :(得分:7)

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

我添加了另一个伪元素。我给它的元素background-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*/
}