由於近期的項目中出現了不規則的邊框和圖形， 所以重新溫習一下CSS3的圖形繪製。。。樣式繪製的圖形比圖片的性能要好，體驗更佳，關鍵一點是更加有趣！
以下幾個例子主要是運用了css3中border、bordr-radius、transform、僞元素等屬性來完成的，我們先了解下它們的基本原理。
border：簡單的來說border語法主要包含（border-width、border-style、border-color）三個屬性。
-
- border-top（上邊框）：border-width border-style border-color
- border-right（右邊框）：border-width border-style border-color
- border-bottom（下邊框）：border-width border-style border-color
- border-left（左邊框）：border-width border-style border-color
border-radius：border-radius 的語法比我們想像中靈活得多。你可能會驚訝地發現 border-radius 原來是一個簡寫屬性。它所對應的各個展開式屬性：
-
- border-top-left-radius（左上圓角半徑）
- border-top-right-radius （右上圓角半徑）
- border-bottom-right-radius （右下圓角半徑）
- border-bottom-left-radius（左下圓角半徑）
border-image：共有三個屬性，分別是圖片（border-image-source）、剪裁位置（border-image-slice）、重複性（border-image-repeat）。
圖片：使用URL調用
剪裁位置：共有1~4個參數，沒有單位（默認是像素），也可以用百分比
-
- 第一個參數a：距離上邊相應長度進行裁剪
- 第二個參數b：距離右邊相應長度進行裁剪
- 第三個參數c：距離下邊相應長度進行裁剪
- 第四個參數d：距離左邊相應長度進行裁剪
重複性：有三個參數 stretch（默認值），round，repeat
-
- 默認值是stretch，拉伸的意思，可以看到上面的效果圖中，“2”是垂直拉伸的，“>”是水平拉伸的，而中間的格子是水平垂直一起拉伸的。
- round是平鋪
- repeat是重複
話不多說，來直接看下效果：
1、三角形系列（三角形、倒三角、左三角、右三角、左上三角、右上三角、左下三角、右下三角）
主要用到的是：寬度高度設置爲0， border的各個邊的設置（各個邊的透明或不透明）；
.triangle-up {
/* 三角形 */
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #f00;
}
.triangle-down {
/* 倒三角 */
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #f00;
}
.triangle-left {
/* 左三角 */
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 100px solid #f00;
}
.triangle-right {
/* 右三角 */
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid #f00;
}
.triangle-topleft {
/* 左上三角 */
width: 0;
height: 0;
border-right: 100px solid transparent;
border-top: 100px solid #f00;
}
.triangle-topright {
/* 右上三角 */
width: 0;
height: 0;
border-left: 100px solid transparent;
border-top: 100px solid #f00;
}
.triangle-downleft {
/* 左下三角 */
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 100px solid #f00;
}
.triangle-downright {
/* 右下三角 */
width: 0;
height: 0;
border-left: 100px solid transparent;
border-bottom: 100px solid #f00;
}
2、梯形（三角形的變體，設置左右兩條邊相等，並且給它設置一個寬度）
.Trapezium {
height: 0;
width: 100px;
border-bottom: 100px solid #dc2500;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
2、愛心（心形的製作是非常複雜的，可以使用僞元素來製作，分別將僞元素旋轉不同的角度，並修改transform-origin屬性來元素的旋轉中心點）
.love {
/* 愛心 */
position: relative;
}
.love:before {
content: "";
width: 70px;
height: 110px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(45deg);
}
.love:after {
content: "";
width: 70px;
height: 110px;
background: #f00;
position: absolute;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
transform: rotate(-45deg);
left: -30px;
}
3、 食人豆（吃豆人的製作方法是先在一個圓形裏面製作一個透明的三角形）
.pacman {
/* 食人豆 */
width: 0;
height: 0;
border: 60px solid #f00;
border-right: 60px solid transparent;
border-radius: 100%;
}
4、對話框（消息提示框可以先製作一個圓角矩形，然後在需要的地方放置一個三角形）
.alertDialog {
/* 對話框：一個圓角矩形和一個小三角形 */
width: 150px;
height: 100px;
background: #f00;
border-radius: 10px;
position: relative;
}
.alertDialog:before {
content: "";
width: 0;
height: 0;
position: absolute;
left: -20px;
top: 40px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 20px solid #f00;
}
5、鑽石（首先畫一個直角梯形，再通過僞類元素在其下方畫一個三角形）
.diamond {
/* 鑽石：梯形和三角形組成 */
width: 50px;
height: 0;
position: relative;
border-bottom: 25px solid #f00;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}
.diamond:before {
content: "";
width: 0;
height: 0;
position: absolute;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 70px solid #f00;
left: -25px;
top: 25px;
}
6、五角星（星形的實現方式比較複雜，主要是使用transform屬性來旋轉不同的邊）
.starFive {
/* 五角星： */
width: 0;
height: 0;
position: relative;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 60px solid #f00;
transform: rotate(35deg);
}
.starFive:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 60px solid #f00;
transform: rotate(-70deg);
top: 3px;
left: -80px;
}
.starFive:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-bottom: 60px solid #f00;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
transform: rotate(-35deg);
top: -40px;
left: -49px;
}
7、菜單（結合::before和::after兩個僞元素）
.btn-hamburger i {
/* position: relative; */
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
width: 22px;
height: 3px;
color: #fff;
font: bold .24rem/0.4 Helvetica;
text-transform: uppercase;
text-indent: -55px;
background: #fff;
transition: all 0.2s ease-out;
}
.btn-hamburger i::before, .btn-hamburger i::after {
content: '';
width: 22px;
height: 3px;
background: #fff;
position: absolute;
left: 0;
transition: 0.2s;
}
.btn-hamburger i::before {
top: -7px;
}
.btn-hamburger i::after {
bottom: -7px;
}