teckyio / superellipse-css

超橢圓 CSS 懶人包

正當大家都興高采烈打開 Photoshop/Figma 按照「超橢圓」修改自己 Logo，我們發現很多公司還未沒有跟隨改變 Logo 🥺！！肯定是 border-radius 大法被笑得狠，IT 部門又未收到新圖檔，所以，我們推出了【超橢圓 CSS 懶人包】！來！把所有的 Logo 都變成「超橢圓」吧！！！

用法

把以下一段 CSS 貼到任何 HTML element 當中，便可以看到「 超橢圓」！當然，只有方形的 Logo 才能使用這個懶人包啊！

  mask: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M 0, 100 C 0, 23 23, 0 100, 0 S 200, 23 200, 100 177, 200 100, 200 0, 177 0, 100" fill="white"></path></svg>');
  mask-size: 100% 100%;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M 0, 100 C 0, 23 23, 0 100, 0 S 200, 23 200, 100 177, 200 100, 200 0, 177 0, 100" fill="white"></path></svg>');
  border-radius: 0;

示範

授權

MIT