最终效果图：

image.png

1、方法一：margin定位

CSS

/* 长方形 */
    .a1{
        background-color: rgb(91,155,236);
        width: 150px;
        height: 36px;
        text-align: center;
    }
    /* 左下角直角三角形 */
    .a2{
        width: 0;
        height: 0;
        margin-top: -6px;
        border-top: 24px solid rgb(0, 112, 192);
        border-left: 33px solid transparent;
    }
    /* 右边上三角 */
    .a3{
        width: 0;
        height: 0;
        margin-left: 150px;
        margin-top: -60px;
        border-top: 18px solid rgb(91, 155, 236);
        border-right: 20px solid transparent;
    }
    /* 右边下三角 */
    .a4{
        width: 0;
        height: 0;
        margin-left: 150px;
        margin-top: 2px;
        border-bottom: 16px solid rgb(91, 155, 236);
        border-right: 20px solid transparent;
    }

HTML

<div class="a1"><h4>标题文字</h4>
        <div class="a2"></div>
        <div class="a3"></div>
        <div class="a4"></div>
</div>

2、方法二：float定位

同行元素用float定位要好一些，不然用margin定位会出现不同浏览器因为识别px的大小不同而出现偏移。就像上面margin定位的在IE浏览器中会出现右边两个三角形向上偏移，不能同行。接下来用浮动定位优化一下。

CSS

/* 长方形 */
    .a1{
        background-color: rgb(91,155,236);
        float: left;
        clear: right;
        width: 150px;
        height: 36px;
        text-align: center;
    }  
    /* 右边上三角 */
    .a3{
        width: 0;
        height: 0;
        float: left;
        border-top: 18px solid rgb(91, 155, 236);
        border-right: 20px solid transparent;
    }
    /* 右边下三角 */
    .a4{
        width: 0;
        height: 0;
        border-bottom: 18px solid rgb(91, 155, 236);
        border-right: 20px solid transparent;
    }
    /* 左下角直角三角形 */
    .a2{
        width: 0;
        height: 0;
        float: left;
        clear: left;
        border-top: 24px solid rgb(0, 112, 192);
        border-left: 33px solid transparent;
    }
    h4{
        margin-top:4px;
    }

HTML

    <div class="a1">
        <h4>标题文字</h4>           
    </div>
    <div class="a3"><div class="a4"></div></div>
    <div class="a2"></div>

小结：主要思想是分割特殊图形，用基本图形拼接。后面再归纳一篇基础图形绘制的文章。