duyue6002 / Blog

:pencil2: Write here

http://duyue6002.github.io/Blog/#/

5 stars 1 forks source link

[总结] CSS 实践 #15

Open duyue6002 opened 5 years ago

duyue6002 commented 5 years ago

CSS Tricks 的实现

duyue6002 commented 5 years ago

常见形状

圆和椭圆

利用border-radius属性，这是简写属性，代表：左上、右上、右下、左下。一个数字/百分比，表示圆的半径。两个数字/百分比，表示椭圆的半长轴、半短轴。

平行四边形

使用嵌套元素块元素，使用transform: skewX/Y(deg)实现。
使用伪元素利用position: absolute设置位置使伪元素与父元素大小相同，也是transform属性实现。
使用clip-path 设置polygon的值。polygon(x-axis y-axis, x-axis y-axis, ...) 代表切割路径。