CSS的魅力還是很強大的，雖然我還只懂一點點的，看見大佬寫出來的炫酷頁面，還是很羨慕??！
下面記錄一下，CSS 畫出多邊形

line-gradient: 漸變的方法

background: #0F3A3C;
background: linear-gradient(135deg, transparent 10px, #0F3A3C 0) top left,
linear-gradient(-135deg, transparent 0, #0F3A3C 0) top right,
linear-gradient(-45deg, transparent 10px, #0F3A3C 0) bottom right,
linear-gradient(45deg, transparent 0, #0F3A3C 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
效果圖：

image.png

該方法有一個坑，因為size是50%，當長度為奇數(shù)的時候，中間會出現(xiàn)一條白線。如果你的元素大小固定且值為復數(shù)，可以使用此方法。
如果大小不固定，推薦使用以下方法。

clip-path:使用裁剪方式創(chuàng)建元素的可顯示區(qū)域。區(qū)域內的部分顯示，區(qū)域外的隱藏
inset() : 定義一個矩形 。注意，定義矩形不是rect，而是 inset；
circle(): 定義一個圓 ；
ellipse() : 定義一個橢圓 ；
polygon(): 定義一個多邊形 。

具體用法看這里：https://www.zhangxinxu.com/wordpress/2014/12/css3-svg-clip-path/

這里用到的是 polygon：通過設定坐標點，連接點到點后形成多邊形
注意點：
1. 如果使用百分比，那長寬記得設定
2. 即從一個方向，順時針或者逆時針繪制一個多邊形，值為（x y, x y,...）,坐標軸是這樣的：
3. 通過 clac 計算，可以得到更精準的圖形

image.png

兼容性：

image.png

-webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);

效果圖：

image.png

background: #0F3A3C;
-webkit-clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px),
calc(100% - 10px) 100%, 0 100%,
0 10px
);
clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px),
calc(100% - 10px) 100%, 0 100%,
0 10px
);
效果圖：

image.png

這里有一個工具，繪制完圖形，會自動形成代碼。
工具： https://bennettfeely.com/clippy/

祝好 哈哈哈