如何使用纯CSS3创建此形状？

我遇到了使用CSS3重新创建这种形状的问题！这将被用作一个头部，它将延伸到整个网站，并且它的背景需要透明，所以我遇到了试图重新创建它的问题！如何使用纯CSS3创建此形状？

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

enter image description here

当前CSS：

body { 
    background: #ff00ff; 
} 

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

来源

2014-02-24 michaelsmyth

你能告诉我们你有问题？ – imjared

好但很难。如果你不成功，你可能只考虑一个图像甚至矢量图像。您附加了10KB的jpg图像，但是如果您将此图像存储为png图像，则可以将大小减小到1.5KB以下，并且您还可以获得透明度。 – GolezTrol

我们无法从您的保管箱中打开该文件。或者我们可以，但CSS缺失。只需将问题粘贴到问题中。 – GolezTrol

我的日子不好过尝试这种使用CSS3，所以除非别人设法构建它，你将需要的图像。

如果您选择使用图片，请务必将其制作为PNG图片。我已经拍摄了您的图像，将颜色降低到只有8种颜色，这足以在边缘进行抗锯齿，然后使用PNG破碎机对其进行压缩。由此产生的图像是大约1.14KB，这是JPG图像大小的1/10，并具有透明度的附加好处： Demo image

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

SVG可以从一个单独的文件被加载，但你也可以把它放在一个数据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有相同的优点：非常小，类似的浏览器支持......我只有一点麻烦使它变得很大，但也许你可以找到一个解决方案，如果你首先需要它。

额外的信息：

来源

2014-02-24 18:26:06 GolezTrol

如何使用纯CSS3创建此形状？

回答

相关问题