最終效果圖：
image.png
1缩滨、方法一：margin定位
CSS
/* 長(zhǎng)方形 */
.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>標(biāo)題文字</h4>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
</div>
2、方法二：float定位
同行元素用float定位要好一些荧关，不然用margin定位會(huì)出現(xiàn)不同瀏覽器因?yàn)樽R(shí)別px的大小不同而出現(xiàn)偏移。就像上面margin定位的在IE瀏覽器中會(huì)出現(xiàn)右邊兩個(gè)三角形向上偏移，不能同行岭辣。接下來(lái)用浮動(dòng)定位優(yōu)化一下。
CSS
/* 長(zhǎng)方形 */
.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>標(biāo)題文字</h4>
</div>
<div class="a3"><div class="a4"></div></div>
<div class="a2"></div>
小結(jié)：主要思想是分割特殊圖形甸饱，用基本圖形拼接易结。后面再歸納一篇基礎(chǔ)圖形繪制的文章。
