今天這篇博客主要是探究一下CSS3中clip-path用法，也是我學習前端快一個月的小小足跡吧班眯！

本來是想把元素居中這個問題拿來好好說說希停，不過正好遇到就寫寫

怎么遇到這個用法的

需求.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);
  }

這時候是完成了樣式，不過如果你想寫文字就會被擋住磁餐，想必也不是我們想要的违崇。我想了個笨辦法，那就是再添加一個標簽诊霹，這里面寫入文字羞延，使標簽疊層在文本框之上。所以再寫一個<span>在文本框之下脾还，作為其子元素伴箩，因為文本框是絕對定位的，所以這個新標簽也絕對定位鄙漏，就解決了文本問題嗤谚。

有沒有更炫酷的辦法呢？

我咨詢了下若愚大大怔蚌，給的建議是CSS3 clip-path呵恢。

什么是clip-path？

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

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

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

實現(xiàn)功能

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

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

其中inset是矩形的剪切暗挑，circle是圓形的剪切，ellipse是橢圓的剪切斜友，polygon是多邊形的剪切炸裆。對于我們想要把偽元素這個矩形剪切成三角形，應(yīng)該使用polygon這個語法鲜屏。

在polygon的（）里是我們在平面中定位的點烹看，系統(tǒng)會自動地把這幾個點按照順序連接起來国拇，并剪切。例如我們要剪切的這個例子：

坐標圖.png

紅色區(qū)就是我們要剪切的這部分惯殊，坐標分別是（0,0）酱吝，（25,0），（0土思，25）掉瞳。因為我們沒有設(shè)置初始點，所以默認從左上角為（0,0）浪漠，另外這個和數(shù)學坐標系是不同的
所以代碼如下：

.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-是因為有些兼容問題，所以有時候必須帶上霎褐。
最后out出來也能實現(xiàn)了效果址愿。

其他

• 在caniuse.com上查找，發(fā)現(xiàn)兼容性實在很成問題冻璃，ie上全部不支持這個語法响谓，所以在使用場景中需要慎重。

• inset是矩形剪切省艳，括號里有四個值娘纷，剪切后的上邊框離原圖上邊框的距離，剪切后的右邊框離原圖右邊框的距離跋炕，剪切后的下邊框離原圖下邊框的距離赖晶，剪切后的左邊框離原圖左邊框的距離。

  
  
  inset.png

• circle中默認是從圖形中心為初始點辐烂，后面（）里面可以寫像素遏插，也可以寫百分比。像素應(yīng)該是半徑或者直徑的長度纠修，百分比不太確定胳嘲。

• ellipse是橢圓形的剪切方式，暫時還有需要研究扣草。

• 同時感謝若愚大大給我介紹這個用法了牛，不然我都不知道。

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