自适应的椭圆
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
网友评论