今天這篇博客主要是探究一下CSS3中clip-path用法，也是我學(xué)習(xí)前端快一個(gè)月的小小足跡吧！

本來(lái)是想把元素居中這個(gè)問(wèn)題拿來(lái)好好說(shuō)說(shuō)，不過(guò)正好遇到就寫(xiě)寫(xiě)

怎么遇到這個(gè)用法的

需求.png

就是將圖片中的三角形底邊和矩形重疊的這部分去掉。

需求end.png

完成辦法1.png

 .container3::before{
    content:"";
    display: block;
    width: 25px;
    height: 25px;
    background:white;
    border-top: 2px solid #ccc; 
    border-left: 2px solid #ccc;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
    position: absolute;
    top: -14px;
    left: 15px;
    transform: rotatez(45deg);
  }

這時(shí)候是完成了樣式，不過(guò)如果你想寫(xiě)文字就會(huì)被擋住，想必也不是我們想要的。我想了個(gè)笨辦法，那就是再添加一個(gè)標(biāo)簽，這里面寫(xiě)入文字，使標(biāo)簽疊層在文本框之上。所以再寫(xiě)一個(gè)<span>在文本框之下，作為其子元素，因?yàn)槲谋究蚴墙^對(duì)定位的，所以這個(gè)新標(biāo)簽也絕對(duì)定位，就解決了文本問(wèn)題。

有沒(méi)有更炫酷的辦法呢？

我咨詢(xún)了下若愚大大，給的建議是CSS3 clip-path。

什么是clip-path？

clip-path屬性可以創(chuàng)建一個(gè)只有元素的部分區(qū)域可以顯示的剪切區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。剪切區(qū)域是被引用內(nèi)嵌的URL定義的路徑或者外部svg的路徑，或者作為一個(gè)形狀例如circle().。clip-path屬性代替了現(xiàn)在已經(jīng)棄用的剪切 clip屬性。

clip的英語(yǔ)是剪切，path為路徑。根據(jù)定義，大致可以知道兩件事：

1. clip-path作用的區(qū)域是分為可見(jiàn)和不可見(jiàn)兩個(gè)部分的；
2. 這個(gè)功能和某種路徑有關(guān)系。

實(shí)現(xiàn)功能

根據(jù)MDN的介紹，還有其他谷歌博客的介紹，大致找到4種寫(xiě)法：

.clip-me {
clip-path: inset();
clip-path: circle();
clip-path: ellipse();
clip-path: polygon();
}

其中inset是矩形的剪切，circle是圓形的剪切，ellipse是橢圓的剪切，polygon是多邊形的剪切。對(duì)于我們想要把偽元素這個(gè)矩形剪切成三角形，應(yīng)該使用polygon這個(gè)語(yǔ)法。

在polygon的（）里是我們?cè)谄矫嬷卸ㄎ坏狞c(diǎn)，系統(tǒng)會(huì)自動(dòng)地把這幾個(gè)點(diǎn)按照順序連接起來(lái)，并剪切。例如我們要剪切的這個(gè)例子：

坐標(biāo)圖.png

紅色區(qū)就是我們要剪切的這部分，坐標(biāo)分別是（0,0），（25,0），（0，25）。因?yàn)槲覀儧](méi)有設(shè)置初始點(diǎn)，所以默認(rèn)從左上角為（0,0），另外這個(gè)和數(shù)學(xué)坐標(biāo)系是不同的
所以代碼如下：

.container3::before{
    content:"";
    display: block;
    width: 25px;
    height: 25px;
    background:white;
    border-top: 2px solid #ccc; 
    border-left: 2px solid #ccc;
    border-bottom: 2px solid transparent;
    border-right: 2px solid transparent;
    position: absolute;
    top: -12px;
    left: 15px;
    transform: rotatez(45deg);
    -webkit-clip-path: polygon(0px 0px, 0px 25px, 25px 0px);
    clip-path: polygon(0px 0px, 0px 25px, 25px 0px); 
  }

-webkit-是因?yàn)橛行┘嫒輪?wèn)題，所以有時(shí)候必須帶上。
最后out出來(lái)也能實(shí)現(xiàn)了效果。

其他

• 在caniuse.com上查找，發(fā)現(xiàn)兼容性實(shí)在很成問(wèn)題，ie上全部不支持這個(gè)語(yǔ)法，所以在使用場(chǎng)景中需要慎重。

• inset是矩形剪切，括號(hào)里有四個(gè)值，剪切后的上邊框離原圖上邊框的距離，剪切后的右邊框離原圖右邊框的距離，剪切后的下邊框離原圖下邊框的距離，剪切后的左邊框離原圖左邊框的距離。

  
  
  inset.png

• circle中默認(rèn)是從圖形中心為初始點(diǎn)，后面（）里面可以寫(xiě)像素，也可以寫(xiě)百分比。像素應(yīng)該是半徑或者直徑的長(zhǎng)度，百分比不太確定。

• ellipse是橢圓形的剪切方式，暫時(shí)還有需要研究。

• 同時(shí)感謝若愚大大給我介紹這個(gè)用法，不然我都不知道。

參考的鏈接：
CSS3 clip-path polygon圖形構(gòu)建與動(dòng)畫(huà)變換二三事
MDN