[CSS100] Day 03 The Pyramid
Cathy P
 2021-03-12 22:30:11      

The Pyramid Demo

See the Pen 100DaysCss #03 by Cathy (@smile25896) on CodePen.

這次的金字塔和金字塔的陰影的三角形不是以往學到的透過border畫出來的，而是透過clip-path這個屬性畫成的，透過這個屬性不只三角形，各式各樣的圖形感覺都能畫得出來！
再搭配Day2學到的動畫，改變一下天空、金字塔的顏色以及太陽和陰影的角度，就能夠完成。另外雖然範例沒有，但我還加了黃昏時候的橘黃色感覺。

學習重點

  1. clip-path

clip-path

clip-path是利用剪裁遮罩，建立可視區域，可視區域外的地方皆被隱藏，透過clip-path產生的剪裁遮罩來產生各式各樣圖形。
clip-path有非常多種用法：

1
2
3
clip-path: circle();    // 圓型
clip-path: ellipse();   // 橢圓型
clip-path: polygon();   // 多邊形

其中三角形就是使用polygon()，參數分別對應到多邊形點的xy軸，所以幾個參數就代表有幾個點。

直角三角形：

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

或是任意調整點的位置：

1
clip-path: polygon(50% 0%, 0 100%, 94% 63%);

除了三角形也可以畫更多邊形，像是八邊形：

1
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

還可以做一些其他的形狀，像是：

1
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);

有興趣的話可以到CSS clip-path maker上操作看看。