css3 对话框上的三角形

1.纯三角形的写法：

html:

<div class="tooltip-popper is-dark">消息提醒

        <div class="popper-arrow"></div>

</div>

样式：

.tooltip-popper{

        position: absolute;

        border-radius: 4px;

        padding: 10px;

        font-size: 12px;

        text-align: center;

        white-space: nowrap;

        line-height: 1.2;

        min-width: 10px;

        word-wrap: break-word;

        transform-origin: left center;

        z-index: 2007;

        visibility: hidden;

        opacity: 0;

        top: 55px;

        left: 50%;

        transform: translateX(-50%);

        transition: all .3s;

        -webkit-transition: all .3s;

    }

    .tooltip-popper.is-dark{

        background-color: #595959;

        box-shadow: 0 12px 32px 0 rgba(38, 38, 38, 0.16);

        transition: opacity 0.3s;

        color: #FFF;

    }

    .tooltip-popper .popper-arrow,

    .tooltip-popper .popper-arrow::after {

        position: absolute;

        display: block;

        width: 0;

        height: 0;

        border-color: transparent;

        border-style: solid;

    }

    .tooltip-popper .popper-arrow {

        top: -9px;

        width: 0;

        height: 0;

        left: 50%;

        margin-left: -5px;

        border-left: 6px solid transparent;

        border-right: 6px solid transparent;

        border-bottom: 6px solid #595959;

    }

2.正方形的写法：

html:

消息提醒

        <div class="popper-arrow"></div>

</div>

样式：

.tooltip-popper{

        position: absolute;

        border-radius: 4px;

        padding: 10px;

        font-size: 12px;

        text-align: center;

        white-space: nowrap;

        line-height: 1.2;

        min-width: 10px;

        word-wrap: break-word;

        transform-origin: left center;

        z-index: 2007;

        visibility: hidden;

        opacity: 0;

        top: 55px;

        left: 50%;

        transform: translateX(-50%);

        transition: all .3s;

        -webkit-transition: all .3s;

    }

    .tooltip-popper.is-dark{

        background: #303133;

        transition: opacity 0.3s;

        color: #FFF;

    }

    .tooltip-popper .popper-arrow,

    .tooltip-popper .popper-arrow::after {

        position: absolute;

        display: block;

        width: 0;

        height: 0;

        border-color: transparent;

        border-style: solid;

    }

    .tooltip-popper .popper-arrow {

        border-width: 5px;

        top: -3px;

        width: 5px;

        height: 0;

        background: #303133;

        left: 50%;

        margin-left: -5px;

        transform: rotate(45deg);

    }