如何使用纯 CSS3 创建这个形状？答案

【问题标题】：How can I create this shape using pure CSS3?如何使用纯 CSS3 创建这个形状？
【发布时间】：2017-08-30 05:14:14
【问题描述】：

我在使用 CSS3 重新创建这种形状时遇到了问题！这将用作横跨整个站点的标题，并且它的背景需要是透明的，所以我在尝试重新创建它时遇到了问题！

编辑：这就是我到目前为止所得到的，我只是无法重新创建曲线！ https://dl.dropboxusercontent.com/u/33897365/css3/index.html

当前的 CSS：

body {
    background: #ff00ff;
}

#header { 
    height: 150px;
    width: 100%;
    background: #000;
    border-bottom-right-radius: 35% 90%;
}

【问题讨论】：

您能告诉我们您遇到问题的地方吗？
不错但很难。如果不成功，您可能只考虑图像甚至矢量图像。您附加了一个 10KB 的 jpg 图像，但如果将其存储为 png 图像，则可以将大小减小到 1.5KB 以下，并且还具有透明度。
我们无法从您的 Dropbox 打开该文件。或者我们可以，但是缺少 CSS。只需将代码粘贴到问题中即可。
嘿 GolezTrol，我刚刚解决了这个问题，你能再检查一下吗？
@GolezTrol 我在编辑中添加了 CSS

标签： css shapes css-shapes

【解决方案1】：

我很难使用 CSS3 来尝试这个，所以除非其他人设法构建它，否则你将需要一个图像。

如果您选择使用图片，请确保将其设为 PNG。我已经拍摄了您的图像，将颜色降低到只有 8 种颜色，这对于边缘的抗锯齿来说已经足够了，然后我使用 PNG 粉碎机对其进行了压缩。生成的图像大约为 1.14KB，是 jpg 图像大小的 1/10，并具有透明度的额外好处：

但另一个选项是 SVG。 SVG 是一种基于 xml 的矢量图形格式。所有主流浏览器都支持它，除了 IE8-，但它们也不支持你需要的 CSS3 功能。

SVG 可以从单独的文件中加载，但您也可以将其放在 data-url 中，甚至可以将其内联到您的页面中，如下所示：

<div class="container">
  <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="960px" height="320px" viewBox="0 0 960 320" enable-background="new 0 0 960 320" xml:space="preserve">
    <path fill="#FF1731" d="M960,47c-167,0-348.331,18-474.673,81.333C388.356,176.943,165.667,200.875,0,200.875V0h960"/>
    </svg>
</div>

见：http://jsfiddle.net/8xJXr/（是的，我把它变成红色的。只是因为；））

因此它具有与 CSS 相同的优点：非常小，支持类似的浏览器...我只是在使它变大时遇到了一点麻烦，但如果您首先需要它，也许您可以找到解决方案。

额外信息：

【讨论】：