1. 首頁
  2. 問答
  3. 用純CSS繪製超橢圓形

用純CSS繪製超橢圓形

2014-09-24 287 views
2

正如標題所示：如何用純CSS繪製超橢圓（特別是Apple iOS7/8）？不太確定是否可能，但仍然可以。用純CSS繪製超橢圓形

參考圖像： enter image description here

來源

2014-09-24 tyteen4a03

+1

應該怎麼看？提供一張圖片。 – 2014-09-24 10:04:44

+0

@ Flopet17參考文章：http://www.pixelresort.com/blog/start-making-ios-7-icons-with-the-app-icon-template-3-0/ 基本上，它是一個Apple在iOS 7/8中使用。 – tyteen4a03 2014-09-24 10:26:24

+1

除非使用SVG或HTML canvas，否則最好的做法是繪製一個帶圓角的正方形。其他任何事情都會花費很多工作。 – 2014-09-24 10:41:26

回答

3

這是不準確的，但你或許可以調整的想法得到的東西接受你。基本上，您可以在具有圓形邊框的包含元素下面使用橢圓邊框將具有橢圓邊框的::before和::after僞元素分層以獲得效果。

我將僞元素的背景顏色設置爲藍色和綠色以進行可視化，但它們將設置爲包含元素的顏色。

JSFiddle demo

Red and blue pseudo-elements for visualization of technique

來源

2014-10-21 03:40:37 Talmid

相關問題

 相關問題