建站
咨詢
售后
建站咨詢
新聞中心
就是一個(gè)正常的矩形，然后被“切”了一塊，而且是沿著右上角切的。那么，這種布局如何實(shí)現(xiàn)呢?
員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團(tuán)隊(duì)的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)公司堅(jiān)持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因?yàn)椤皩Ｗ⑺詫I(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，成都微信小程序，軟件定制制作等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。
一、自適應(yīng)方式
這種布局一般有兩種自適應(yīng)方式，當(dāng)然具體需要哪種可以根據(jù)實(shí)際設(shè)計(jì)師需求。
1. 固定距離
無論寬高怎么變化，切角距離頂部的距離是固定的，如下：
2. 固定角度
無論寬高怎么變化，切角與頂部的夾角是固定的，如下：
下面具體來看這兩種布局的實(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)。起初，我以為簡單的線性漸變就能實(shí)現(xiàn)，比如：
div{
background: linear-gradient(-30deg, #B89DFF 80%, transparent 0);
}實(shí)時(shí)效果如下：
可以看到，角度雖然是固定的，但是切角不會緊貼右上角，原因是線性漸變的起始點(diǎn)是沿著角度與之垂直的最遠(yuǎn)距離，如下所示(截圖取自 MDN 官網(wǎ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)，我們需要移到右上角，可以通過at來指定位置，如下：
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()
新聞標(biāo)題：一篇學(xué)會CSS實(shí)現(xiàn)"切角"效果
本文URL：http://www.dlmjj.cn/article/djecoje.html
