自適應的橢圓
25e25e9254e99bfbf31965330627be5.png
平行四邊形
image.png
https://jsfiddle.net/noyanse/3L6uyjfe/12/
菱形圖片
- 1.基于變形的方案
https://jsfiddle.net/noyanse/21g5199j/11/ - 2.裁切路徑方案clip-path
https://jsfiddle.net/noyanse/o1zv2cbc/
image.png
切角效果
https://jsfiddle.net/noyanse/Loh6px5k/15/
image.png
弧形切角
https://jsfiddle.net/noyanse/zpnrh523/2/
梯形標簽頁
- 1.通過偽元素的邊框模擬出的梯形
- 2.transform: perspective(.5em) rotateX(5deg);
在3D世界的坐標,perspective在Z軸上，而perspective是設置Z軸的長度。在css3中只有設置了perspective的值元素才會有Z軸榕吼，perspective為none元素則沒有Z軸(就是2D元素)归粉。
https://jsfiddle.net/noyanse/4Lgnvu77/12/
http://play.csssecrets.io/trapezoid-tabs
餅圖
https://jsfiddle.net/noyanse/4sxha6r7/17/
https://jsfiddle.net/noyanse/4sxha6r7/21/
https://jsfiddle.net/noyanse/4sxha6r7/33/
http://dabblet.com/gist/722909b9808c14eb7300
