css实现切角效果(弧形切角)

在这之前先熟悉一个css属性
linear-gradient（）函数用于创建一个线性渐变的“图像”。
语法

background ：linear - gradient （direction ，color - stop1 ，color - stop2 ，...）; 

direction: 用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...: 用于指定渐变的起止颜色。

效果截图

实现代码

  width: 200px;
  height: 150px;
  background: linear-gradient(-45deg,transparent 20px, aqua 0);

效果截图

实现代码(设置两个不同颜色，便于理解)

    background: linear-gradient(-45deg, transparent 20px, #3e5858 0) right, 
          linear-gradient(45deg, transparent 20px, #2fa2a2 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;

效果截图

实现代码

  width: 200px;
  height: 150px;
  background: linear-gradient(-45deg,transparent 15px,aqua 0) bottom right,
              linear-gradient(45deg,transparent 15px,aqua 0) bottom left,
              linear-gradient(135deg,transparent 15px,aqua 0) top left,
              linear-gradient(-135deg,transparent 15px,aqua 0) top right;
  background-size: 50% 50%;
  background-repeat: no-repeat;

效果截图
实现代码

  width: 200px;
  height: 150px;
  background: radial-gradient(circle at bottom right, transparent 15px, aqua 0)
      bottom right,
    radial-gradient(circle at bottom left, transparent 15px, aqua 0) bottom left,
    radial-gradient(circle at top left, transparent 15px, aqua 0) top left,
    radial-gradient(circle at top right, transparent 15px, aqua 0) top right;
  background-size: 50% 50%;
  background-repeat: no-repeat;