Question

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

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

Answer 1

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

Answer 2

看看小提琴 - 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*/
}

如何制作一个：箭头后只是一个轮廓？

2 个答案: