在制作頁面時，常用CSS畫各種形狀帶代替img擒权，這樣可以免去一次HTTP請求袱巨。而且有些基本形狀用CSS實現(xiàn)比切圖更方便和靈活。本篇就介紹一下常用形狀的畫法碳抄。
- 圓形
- 橢圓（半橢圓愉老，4分之一橢圓）
- 三角形
- 平行四邊形
- 菱形
- 梯形
圓形
是最常見最基本的圖型，給寬高相等的div設border-radius: 50%剖效，輕松實現(xiàn)：
.circle {
width: 5em;
height: 5em;
background: #fb3;
border-radius: 50%;
}
<div class="circle"></div>
橢圓
參照border-radius一文俺夕，給寬高不等的div設border-radius: 50%來實現(xiàn)：
.ellipse {
width: 5em;
height: 2.5em;
background: #fb3;
border-radius: 50%;
}
<div class="ellipse"></div>
半橢圓的關鍵是給四個角指定不同的border-radius半徑：
.half-ellipse1 {
width: 5em;
height: 1.25em;
background: #fb3;
border-radius: 50% / 100% 100% 0 0;
}
.half-ellipse2 {
width: 5em;
height: 1.25em;
background: #fb3;
border-radius: 50% / 0 0 100% 100%;
}
.half-ellipse3 {
width: 2.5em;
height: 2.5em;
background: #fb3;
border-radius: 100% 0 0 100% / 50%;
}
.half-ellipse4 {
width: 2.5em;
height: 2.5em;
background: #fb3;
border-radius: 0 100% 100% 0 / 50%;
}
<div class="half-ellipse1"></div>
<div class="half-ellipse2"></div>
<div class="half-ellipse3"></div>
<div class="half-ellipse4"></div>
以左圖上半橢圓為例，左上角和右上角的半徑值應該是相同的贱鄙，左下角和右下角的半徑值同樣也應該是相同的劝贸。
先看水平方向。因為左上角和右上角沒有直邊逗宁，這意味著它倆的半徑之和要等于整個div的寬度映九，所以左上角和右上角的水平半徑應該均為50%。
再看垂直方向瞎颗。因為左上角和右上角的圓角占據了整個元素的高度件甥，底部完全沒有任何圓角。所以垂直半徑應該設成100% 100% 0 0
最終應該border-radius: 50% 50% 0 0 / 100% 100% 0 0;哼拔。但由于左下角和右下角的垂直半徑為0引有，所以它倆的水平半徑設成什么都沒有影響。因此可以簡化成border-radius: 50% / 100% 100% 0 0;
下半橢圓和左右半橢圓的思路都是一樣的倦逐，自己看看代碼應該能推理出來譬正。
4分之一橢圓的關鍵是其中一個角的水平和垂直半徑都要為100%，其他三個角無圓角：
.quarter-ellipse {
width: 5em;
height: 2.5em;
background: #fb3;
}
.quarter-ellipse1 {
border-radius: 100% 0 0 0;
}
.quarter-ellipse2 {
border-radius: 0 100% 0 0;
}
.quarter-ellipse3 {
border-radius: 0 0 100% 0;
}
.quarter-ellipse4 {
border-radius: 0 0 0 100%;
}
<div class="quarter-ellipse quarter-ellipse1"></div>
<div class="quarter-ellipse quarter-ellipse2"></div>
<div class="quarter-ellipse quarter-ellipse3"></div>
<div class="quarter-ellipse quarter-ellipse4"></div>
畫這些半橢圓啊檬姥，4分之一橢圓啊曾我，有什么用？例如點這里
三角形
用一邊border有顏色健民，另三邊border透明來實現(xiàn)：
.triangle1 {
width: 0;
border: 2em solid transparent;
border-top: 2em solid #fb3;
}
.triangle2 {
width: 0;
border: 2em solid transparent;
border-right: 2em solid #fb3;
}
.triangle3 {
width: 0;
border: 2em solid transparent;
border-bottom: 2em solid #fb3;
}
.triangle4 {
width: 0;
border: 2em solid transparent;
border-left: 2em solid #fb3;
}
<div class="triangle1"></div>
<div class="triangle2"></div>
<div class="triangle3"></div>
<div class="triangle4"></div>
最左圖只是示意抒巢，當div寬高為0時（無內容時高度自動為0不用設），border就是4個三角形秉犹。之后你需要什么方向的三角形蛉谜，只要將該方向的border顯示出來就行了稚晚。不用div用偽元素也是可以實現(xiàn)的，原理是一樣的型诚。三角形的應用場景也很多客燕，例如聊天窗口處的小三角箭頭：
平行四邊形
用transform的skew傾斜來實現(xiàn)：
.parallelogram {
display: inline-block;
padding: .5em 1em;
background-color: #0fa5d9;
color: white;
transform: skewX(-45deg);
}
<div class="parallelogram">HMTL</div>
但如圖所示，skew傾斜后俺驶，內部文字也傾斜了幸逆。如果想內部文字不傾斜棍辕，需要在div里額外加一層標簽暮现，再將該標簽負相同角度skew回來：
.parallelogram2 {
display: inline-block;
padding: .5em 1em;
background-color: #0fa5d9;
color: white;
transform: skewX(-45deg);
}
/* 負相同角度將文字傾斜回來 */
.parallelogram2 > div { transform: skewX(45deg); }
<div class="parallelogram2">HMTL</div>
如果不想多一層標簽，也可以用偽元素楚昭，效果是一樣的：
.parallelogram3 {
position: relative;
display: inline-block;
padding: .5em 1em;
color: white;
}
.parallelogram3::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background-color: #0fa5d9;
transform: skew(-45deg);
}
<div class="parallelogram3">HMTL</div>
其實對其他任何變形式樣栖袋，如果只想變形元素，但不想變形它的內容時就可以用該技巧抚太。例如對正方形rotate一下就能得到菱形塘幅。
菱形
如果是背景的話直接給正方形用rotate就能得到菱形。但如果是圖片的話尿贫，用rotate可能效果不對…
.diamond {
width: 150px;
height: 150px;
transform: rotate(45deg);
overflow: hidden;
}
.diamond img {
transform: rotate(-45deg);
}
<div class="diamond"><img src="head.png" /></div>
上例中用了和平行四邊形一樣的思路电媳，內部img用相反的角度rotate回去。但如圖所示庆亡，成了奇怪的八角形匾乓。解決方案是將圖片放大，放大多少呢又谋？根據勾股定理拼缝，正方形的對角線等于邊長乘根號2，約等于1.414彰亥，因此取稍微大一點放大1.42倍：
.diamond img {
transform: rotate(-45deg) scale(1.42);
}
如果不想多一層div標簽咧七，想直接將img圖片弄成菱形，也可以用clip-path來裁剪任斋。它的好處是簡單優(yōu)雅继阻，可以指定多個剪裁角度，處理非正方形的圖片也毫無壓力废酷，缺點是會有游覽器兼容性問題穴翩，試下來IE全軍覆沒，F(xiàn)irefox也不行锦积，只有Chrome和Oprea支持芒帕。希望解決了兼容性問題后，將來它能大放異彩丰介。
.diamond-clip {
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
<img class="diamond-clip" src="head.png" />
梯形
一種常見的方法是給長方形的div背蟆，加上::before和::after兩個偽元素鉴分，偽元素參照上面畫出三角形，這樣來拼接成一個梯形带膀。缺點是志珍，偽元素數量有限，就這么兩個垛叨，用完后再有需要用到偽元素的需求就沒法滿足了伦糯。其實可以用3D的rotate來實現(xiàn)。
.trapezoid {
display: inline-block;
padding: .5em 1em;
color: white;
background: #58a;
transform: perspective(.5em) rotateX(5deg);
}
<div class="trapezoid">HTML</div>
這個方法簡單方便嗽元，不需要用到偽元素敛纲。但有和平行四邊形一樣的問題，里面的內容文字也3D旋轉了剂癌。想讓內容文字不旋轉需要加一層標簽淤翔，或用偽元素。
.trapezoid2 {
position: relative;
display: inline-block;
padding: .5em 1em;
color: white;
}
.trapezoid2::before {
content: '';
position: absolute;
z-index: -1;
top: 0;right: 0;bottom: 0;left: 0;
background: #58a;
transform: perspective(.5em) rotateX(5deg);
}
<div class="trapezoid2">HTML</div>
從圖中加上紅色邊框也能看出佩谷，3D旋轉的偽元素背景旁壮，和div自身的底部不貼合。由于transform具有層級關系谐檀，會導致div下面的空間被遮蔽抡谐。因此需要指定transform-origin: bottom;讓它在旋轉時，底邊固定桐猬。
.trapezoid2::before {
……
transform-origin: bottom;
}
這樣底邊雖然貼合了麦撵，但內容文字明顯不居中。要讓內容文字居中也很簡單课幕，可以縮減點padding-bottom厦坛，再用scaleY將背景垂直方向拉大點，具體比例需要自己微調一下
.trapezoid4 {
……
padding: .5em 1em .35em;
……
}
.trapezoid4::before {
……
transform: perspective(.5em) rotateX(5deg) scaleY(1.3);
transform-origin: bottom;
}
這樣將transform-origin改成bottom left或bottom right乍惊，就可以得到左傾斜杜秸，右傾斜的標簽頁。你可以點擊這里
