[CSS 3] Add a Cutout Notch to an HTML Element with a CSS Polygon Clip-Path

In this lesson, we'll learn how to use CSS Clip Path to add a notch

clip-path: polygon(
  0% 10%, 10% 0%, /*topleft*/
  92% 0, 100% 8%, /*top right*/
  100% 85%, 85% 100%, /*bottom right*/
  8% 100%, 0% 92% /*bottom left*/
); 

Each edge has two point to define the position.

 

posted @ 2020-07-29 15:21  Zhentiw  阅读(95)  评论(0编辑  收藏  举报