css+图标偏移,CSS绘制不规则图标

最终效果图：

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

标题文字

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

标题文字

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