Question

我在使用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%;
}

Answer 1

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

如果您选择使用图片，请务必将其设为PNG。我拍摄了你的图像，将颜色降低到只有8种颜色，这足以让边缘消除锯齿，然后我用PNG破碎机压缩它。生成的图像大约为1.14KB，是jpg图像大小的1/10，具有透明度的额外好处： Demo image

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

SVG可以从单独的文件加载，但您也可以将其放在数据网址中，甚至可以在页面中内嵌，如下所示：

<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相同的优点：非常小，类似的浏览器支持......我只是有点麻烦使它变得相当大，但也许你可以找到一个解决方案，如果你首先需要它。

额外信息：

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

1 个答案: