CSS形状

CSS-SECRETS

# 自适应的椭圆

border-radius 可以向它一次性提供用空格分开的多个值,分别从左上角开始以顺时针顺序应用到元素的各个拐角。

使用 斜杠/ 我们甚至可以为所有四个角提供完全不同的 水平和垂直半径,在斜杠前指定 1~4 个值,在斜杠后指定另外 1~4 个值,注意这两组值是单独展开为四个值的。

半椭圆

半圆

四分之一椭圆

圆滑方

# 平行四边形

嵌套元素方案

Click me

伪元素方案

Click me

# 梯形

Click me
  
Click me

# 菱形图片

# 切角效果

裁切路径方案

# 简单的饼图