如何使用CSS創建此形狀？

Question

我需要創建這個形狀：

這不能使用border-radius（據我所知）來實現。

觀測數據：這不是一個橢圓形，在這太問題討論：How to give a div oval shape?

Answer 1

簡單的答案是 - 「你不能不過，也有辦法做到這一點。」

您可以嘗試使用Mozilla Borders生成器等工具，該工具將輸出所有主流瀏覽器支持的高級版本的border radius語法。 ：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator

OR

http://www.css3generator.in/border-radius.html

如果不夠漂亮，你可能想使用剪輯路徑與背景色一起選擇。有關這方面的更多信息可以發現here但我想提醒你，不幸的是，它不支持所有的瀏覽器。使用剪輯路徑，您甚至可以繪製SVG並將其用作蒙版。

我已經發現，面膜也可以使用，所以你可以檢查出this

第三種選擇是使用背景圖片...