最近項(xiàng)目中看到這樣的一個(gè)切角效果，如下所示：

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

一、自適應(yīng)方式

這種布局一般有兩種自適應(yīng)方式，當(dāng)然具體需要哪種可以根據(jù)實(shí)際設(shè)計(jì)師需求。

1. 固定距離

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

2. 固定角度

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

下面具體來(lái)看這兩種布局的實(shí)現(xiàn)。

二、固定距離的切角

固定距離的比較好實(shí)現(xiàn)，只需要借助 clip-path[1]就可以了。假設(shè)距離頂部的距離是20px，那么四個(gè)點(diǎn)的坐標(biāo)是：

代碼實(shí)現(xiàn)就是：

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

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

三、固定角度的切角

這個(gè)稍微復(fù)雜一點(diǎn)。起初，我以為簡(jiǎn)單的線性漸變就能實(shí)現(xiàn)，比如：

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

實(shí)時(shí)效果如下：

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

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

那還有其他方式嗎?當(dāng)然也是有的。

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

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

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

效果如下：

因?yàn)殄F形漸變默認(rèn)中心點(diǎn)是容器的中點(diǎn)，我們需要移到右上角，可以通過(guò)at來(lái)指定位置，如下：

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

這樣就得到了一個(gè)固定角度的切角。

四、總結(jié)

以上就是這類布局的兩種實(shí)現(xiàn)方案，主要用到了clip-path和conic-gradient，下面總結(jié)一下：

• clip-path 可以根據(jù)坐標(biāo)點(diǎn)裁剪矩形。
• linear-gradient 也能實(shí)現(xiàn)切角效果，但并不能緊貼右上角。
• conic-gradient 可以實(shí)現(xiàn)實(shí)現(xiàn)任意角度的錐形，同時(shí)能指定中心點(diǎn)位置。

參考資料

[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()