CSS – Clip Path

前言

我是在搞 1 side box-shadow 發現這個功能的. 平常很少做特效, 所以對這個好功能缺乏認識.

這篇大概記入一下先, 以後有認真用再補上細節.

 

參考

Youtube – Awesome UI Interactions with the CSS Clip Path Property

Stack Overflow – How can I add a box-shadow on one side of an element?

The Awesome CSS Clip-path Property

CSS clip-path maker

Youtube – How to make shapes with CSS

 

介紹

它最要的功能就是把一個 div clip 出各種形狀. 配上 animation 就可以做出變 "形狀" 效果了.

比如把一個正方形, 變成圓形, 六角形, 什麼形都可以.

 

畫圓形

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

通常畫圓形, 我們會用 border-radius, 但用 clip-path 會更直觀哦

.container {
  .box1 {
    width: 100px;
    height: 100px;
    background-color: pink;
    border-radius: 50%;
  }
  .box2 {
    margin-top: 1rem;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    clip-path: circle(50%);
  }
}

效果是一模一樣的

clip-path 還有更厲害的地方是它可以控制 position

.container {
  border: 1px solid red;
  .box1 {
    width: 400px;
    height: 200px;
    background-color: pink;
    clip-path: circle(30px at 100px 100px);
  }
}

效果

 

不一定要用 px, 用 percentage 也可以 (但我不清楚它的具體算法. 它的 percentage 不是 depend on width 的)

畫各種形狀

之前寫 CSS – border-radius (Rounded Corners) 有介紹過畫各種形狀. 但是它並不是真的什麼形狀都畫的出來. 很 limitation 的.

而 clip path 就很強大. 幾乎啥形狀都可以畫, 可以用這個工具玩玩看 CSS clip-path maker

常用的是 circle (圓形), ellipse (橢圓形), polygon (多角形, 如上圖)

 

1 side box shadow

一樣是用 box-shadow 來做影子, 只是用了 clip 把不想要的 3 邊影子 clip 掉. 這裏的關鍵是 inset

inset 的用法是這樣的

clip-path: inset(20px 20px 50px 20px);

效果

有點像 padding. top right bottom left 往內 clip.

回到 box-shadow 的例子. inset(0, -15px 0 0)

如果是 4 個 0, 那麼所有 shadow 都看不見. 

right 15px 是往內 clip, 反過來 right -15px 是往外. 所以反而 right shadow 就出現了. 很巧妙的技巧.

但也可以看出不是正規做法. 但是比起 spread 這招還是比較好使的.