在日常開發(fā)當(dāng)中，如果想要開發(fā)多邊形，一般都需要多個盒子或者偽元素的幫助，有沒有一直辦法能只使用一個盒子實現(xiàn)呢？
有的：css裁剪

clip-path介紹

css裁剪（clip-path）這個屬性平時率非常低。但是其實clip并不是CSS3的新屬性，很早就開始出現(xiàn)了。CSS裁剪的這一概念最早是在CSS 2.1時代由clip屬性引入，但該屬性的限制非常多。裁剪初期只能應(yīng)用于絕對定位的元素，并且只能裁剪成矩形。而在CSS3中，提供了強大的clip-path屬性，突破了clip屬性的眾多限制。
clip-path能夠讓你指定一個網(wǎng)頁元素的顯示區(qū)域，而不是顯示全部。在過去有個等效的屬性clip，但在新的CSS規(guī)范中，它已經(jīng)被標(biāo)志為deprecated，用新的clip-path代替。

clip-path到底是什么？

clip-path 屬性可以創(chuàng)建一個只有元素的部分區(qū)域可以顯示的剪切區(qū)域。區(qū)域內(nèi)的部分顯示，區(qū)域外的隱藏。clip-path是一個css3新屬性 , 一般用在svg元素上 , 但是也可以作為普通元素裁剪使用。

clip-path屬性

clip-path屬性可以使用四種裁剪函數(shù)：circle()、ellipse()、inset()和polygon()。
　　下面用一個例子來演示這四個函數(shù)的效果，將它們分別應(yīng)用到四個div元素中，樣式如下，得到的形狀如下圖所示。

circle()：修建矩形的可視范圍

clip-path: inset(10px 20px 30px 40px);

ellipse()：修建圓形的可視范圍

clip-path: circle(50%);

inset()：修建橢圓形的可視范圍

clip-path: ellipse(50% 30%);

polygon()：修建任意多變形的可視范圍

clip-path: polygon(0 0, 100px 0, 160px 200px, 0 200px);

案例

CSS實現(xiàn)一個鼓樣式

如果使用其他方法實現(xiàn)，需要使用到多個盒子，例如：

像圖中這樣使用3個盒子。如果使用clip-path，只需要一個盒子+circle（）。

div {
            background-color: blue;
            height: 200px;
            width: 400px;
            clip-path: circle(50%);

        }

CSS實現(xiàn)一個杠鈴樣式

如果使用其他方法實現(xiàn)，需要使用到多個盒子，例如：

像圖中這樣使用3個盒子。如果使用clip-path，只需要一個盒子+polygon（）。

div {
            width: 200px;
            height: 300px;
            background-color: red;
            clip-path: polygon(0 0,
                    0% 42%,
                    5% 42%,
                    5% 58%,
                    0 58%,
                    0 100%,
                    100% 100%,
                    100% 58%,
                    95% 58%,
                    95% 42%,
                    100% 42%,
                    100% 0);

        }

總結(jié)

相比于傳統(tǒng)的clip屬性只能作用于正方形的裁剪區(qū)域，clip-path可以以任意形狀去裁剪元素，這使得設(shè)計師可以創(chuàng)建更為復(fù)雜和獨特的裁剪效果。無論是絕對定位、固定定位還是相對定位的元素，都可以應(yīng)用clip-path屬性。由于clip-path的強大功能，它可以用于實現(xiàn)一些特殊的動畫效果，如視差廣告效果、菜單欄彈出效果等。通過使用clip-path，可以將復(fù)雜的形狀和動畫效果封裝在CSS中，使得HTML結(jié)構(gòu)和CSS樣式更加清晰和易于維護。clip-path屬性在大部分現(xiàn)代瀏覽器中都有良好的兼容性，這使得開發(fā)者可以放心地使用它來創(chuàng)建跨瀏覽器的獨特視覺效果。

使用該屬性能夠完成的圖形可能性非常高，許多樣式不需要復(fù)雜的dom才能實現(xiàn)。只可惜現(xiàn)在還有部分瀏覽器不支持該功能。文章來源地址http://www.zghlxwxcb.cn/news/detail-445575.html

到了這里，關(guān)于CSS奇思妙想之-利用CSS裁剪（clip-path）完成各種圖形的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！