柚子快報(bào)激活碼778899分享：前端 CSS3：繪制多邊形

http://yzkb.51969.com/

clip-path：該屬性使用裁剪方式創(chuàng)建元素的可顯示區(qū)域，區(qū)域內(nèi)的顯示，區(qū)域外的不顯示。

構(gòu)建一個(gè)三角形

該屬性的使用： 屬性值可以是函數(shù)： circle：繪制圓 ellipse：繪制橢圓 polygon：繪制多邊形 path: 用來(lái)定義形狀的通用元素，所有的基本形狀都可以用path來(lái)創(chuàng)建，是一種svg路徑。

circle

只指明半徑，其中半徑可以是百分比或者是數(shù)值，此時(shí)圓心默認(rèn)為元素中心

.mybox {

width: 100px;

height: 100px;

background-color: yellow;

clip-path: circle(50%);

}

指明圓心，使用at標(biāo)識(shí)符 此時(shí)，可以繪制圓的任意部分

.mybox {

width: 100px;

height: 100px;

background-color: yellow;

clip-path: circle(50% at 100% 100%);

}

使用場(chǎng)景：需要繪制與圓弧相關(guān)的圖形

ellipse 需要同時(shí)指明橫軸、豎軸、以及軸中心 第一個(gè)參數(shù)表示橫軸長(zhǎng)度，第二個(gè)參數(shù)表示豎軸長(zhǎng)度 軸中心使用坐標(biāo)表示，與橫豎軸之間使用at連接

比如：

.mybox {

width: 100px;

height: 100px;

background-color: yellow;

clip-path: ellipse(50% 100% at 100% 100%);

}

其實(shí)只要合理運(yùn)用橫豎軸的長(zhǎng)度，其作用還可以類比于圓的功能

使用場(chǎng)景：繪制有圓弧的圖形

polygon 由于多邊形是由點(diǎn)線組成，如果需要形成一個(gè)圖形，至少需要三個(gè)點(diǎn)構(gòu)成一個(gè)面，點(diǎn)之間相互連接

.mybox {

width: 100px;

height: 100px;

background-color: yellow;

clip-path: polygon(0% 0%,100% 0%,0% 100%);

}

使用場(chǎng)景：需要繪制線條形狀的圖形

path 類似canvas繪圖 用一串字符串來(lái)表示，其中常用的參數(shù)有：

moveTo(m|M) 表明鼠標(biāo)抬起，需要落到的點(diǎn)，不會(huì)繪制線條，只用于改變畫(huà)筆的位置。如果最開(kāi)始繪制的時(shí)候不指明，則默認(rèn)是上一個(gè)點(diǎn)的位置

LineTo(L|l) 畫(huà)筆需要到達(dá)的下一個(gè)點(diǎn)的位置，會(huì)繪制線條，上一個(gè)點(diǎn)與當(dāng)前所處的點(diǎn)會(huì)連接成一條線。

ClosePath(z|Z) 從當(dāng)前點(diǎn)到第一個(gè)點(diǎn)繪制一條線，主要用于閉合所繪制的圖形。

以上參數(shù)一般使用其的縮寫(xiě)，但是有一點(diǎn)需要注意的是，除了(z|Z)外，參數(shù)大小寫(xiě)敏感 大寫(xiě)字母表示絕對(duì)位置，小寫(xiě)字母表示相對(duì)位置，相對(duì)于上一個(gè)點(diǎn)的位置。

例子：繪制一個(gè)T形

.mybox {

? ? width: 600px;

? ? height: 600px;

? ? background-color: yellow;

? ? clip-path: path('M 100 100 L 400 100 L 400 200 L 275 200 L 275 500 L 225 500 L 225 200 L 100 200 z');

}

柚子快報(bào)激活碼778899分享：前端 CSS3：繪制多邊形

http://yzkb.51969.com/

參考鏈接