最近項目中看到這樣的一個切角效果，如下所示：

就是一個正常的矩形，然后被“切”了一塊，而且是沿著右上角切的。那么，這種布局如何實現呢?

一、自適應方式

這種布局一般有兩種自適應方式，當然具體需要哪種可以根據實際設計師需求。

1. 固定距離

無論寬高怎么變化，切角距離頂部的距離是固定的，如下：

2. 固定角度

無論寬高怎么變化，切角與頂部的夾角是固定的，如下：

下面具體來看這兩種布局的實現。

二、固定距離的切角

固定距離的比較好實現，只需要借助 clip-path[1]就可以了。假設距離頂部的距離是20px，那么四個點的坐標是：

代碼實現就是：

div{
  clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
}

這樣就得到了一個固定距離的切角：

三、固定角度的切角

這個稍微復雜一點。起初，我以為簡單的線性漸變就能實現，比如：

div{
  background: linear-gradient(-30deg, #B89DFF 80%, transparent 0);
}

實時效果如下：

可以看到，角度雖然是固定的，但是切角不會緊貼右上角，原因是線性漸變的起始點是沿著角度與之垂直的最遠距離，如下所示(截圖取自 MDN 官網)。

所以并不能保證切角的固定相交位置，比較適合那種小切角場景。

那還有其他方式嗎?當然也是有的。

提到角度，除了線性漸變，還能想到錐形漸變conic-gradient[2]，可以以某一點繪制錐形圖案。假設固定角度是20度，示意如下：

那么，錐形漸變的角度就是 250°(270 - 20)，代碼實現如下：

div{
  background: conic-gradient(#B89DFF 250deg, transparent 0);
}

效果如下：

因為錐形漸變默認中心點是容器的中點，我們需要移到右上角，可以通過at來指定位置，如下：

div{
  background: conic-gradient(at 100% 0, #B89DFF 250deg, transparent 0);
}

這樣就得到了一個固定角度的切角。

四、總結

以上就是這類布局的兩種實現方案，主要用到了clip-path和conic-gradient，下面總結一下：

• clip-path 可以根據坐標點裁剪矩形。
• linear-gradient 也能實現切角效果，但并不能緊貼右上角。
• conic-gradient 可以實現實現任意角度的錐形，同時能指定中心點位置。

參考資料

[1]clip-path: https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

[2]conic-gradient: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient()