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

michaelsmyth 发表于 Dev

迈克尔史密斯

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

GolezTrol

我很难使用CSS3进行尝试，因此，除非有人设法构建它，否则您将需要一个图像。

如果您选择使用图像，请确保将其设置为PNG。我已经拍摄了您的图像，将颜色降低到仅8种颜色，这足以进行边缘的抗锯齿，然后使用PNG压碎器对其进行压缩。生成的图像约为1.14KB，是jpg图像大小的1/10，具有透明性的附加好处：演示图片

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

额外的信息：

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。