CSS工具提示,中心有箭头

时间:2014-05-22 18:37:57

标签: html css tooltip css-shapes

我想在行div的中心放置黑色箭头,同时也像现在一样位于底部。这是JSFiddle。谢谢。

示例代码:

<div class="row divisor">
    Text
    <br />
    text
</div>


.row {
    width: auto; }
    .row:before, .row:after {
        content: " ";
        display: table; }

.row { position: relative; }

.divisor {
    border-bottom: 1px solid #D8D8D8; }

.divisor:before {
    content: " ";
    display: block;
    position: absolute;
    top: 100%;
    left: 5px;
    right: 5px;
    width: 0; 
    height: 0; 
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;   
    border-top: 25px solid #000; 
}

1 个答案:

答案 0 :(得分:3)

更改left: 50%;margin-left: -40px;

.divisor:before {
    content: " ";
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    right: 5px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-top: 25px solid #000;
    margin-left: -40px;
}

查看http://jsfiddle.net/iamrmin/mKLJB/3/