Question

我想在行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; 
}

Answer 1

更改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/

CSS工具提示，中心有箭头

1 个答案: