html - :after矢印をただのアウトラインにする方法は?

Question

約1年半前に質問に投稿されたフィドルを見て、希望どおりにカスタマイズを完了するための少しの助けを探しています。

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

一番下の三角形を立体ではなく三角形の境界にする方法はありますか? または、この効果を達成するために取らなければならない別の方法がありますか.

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*/
}