css 制作三角形

style:

 /*制作三角形的原型*/
    .arrow{
        margin:50px;
        width:0;
        height:0;
        font-size:0;
        border:10px solid;
        /*border-color:#f00 #0f0 #00f #000;*/
        /*隐藏任意三三条边的颜色*/
        border-color:#fff #fff #fff #00aaef;
    }

html:

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

效果：

制作气泡对话框：

style:

send {
        position: relative;
        width: 150px;
        height: 35px;
        background-color: #00aaef;
        border-radius: 5px;
        /*圆角*/
        margin: 30px auto 0;
    }

    .send .arrow {
        position: absolute;
        top: 5px;
        width: 0;
        height: 0;
        font-size: 0;
        border: 10px solid;
        border-color: #fff #fff #fff #00aaef;
        right: -19px;
        /*调整三角形的位置*/
    }

html:

  <div class="send">
        <div class="arrow"></div>
    </div>

效果：