Html 用曲线做div？

这似乎是一个模糊的问题，但你会看到我到底想要什么后，你读了这篇文章，我有一个设计，我应该“转换”到一个静态HTML页面，但我不知道我将如何做到这一点

设计：

我说的曲线是标志所在的曲线，另一条在底部

到目前为止我所做的（有点混乱）：

body，div，h1，h2，h3，h4，h5，h6，p，ul，ol，li，dl，dt，dd，img，表单，字段集，输入，blockquote{
边距：0；填充：0；边框：0；
}
身体{
字体系列：Helvetica，Arial，无衬线；线条高度：24px；
背景：#eee url（images/body bg.jpg）中心顶部不重复；
}
#容器{
宽度：80%；边距：0自动；高度：1000px；边距顶部：-75px；背景色：蓝色；
}
#德斯塔克斯{
宽度：100%；
身高：40%；
背景颜色：灰色；
}
#标题{
溢出：隐藏；
填充：0 50px 0；
}
#mllcont{
高度：200px；
背景颜色：灰色；
}
#slidecont{
高度：650px；
背景色：红色；
}
#方格{
宽度：100%；
高度：250px；
}
#divs div{
高度：250px；
宽度：20%；
边框：0px实心红色；
左缘：2.5%；
保证金权利：2.5%；
float:left；/*这里您还可以使用display:inline块而不是float:left*/
背景：橙色；
}
#收割台h1{
浮动：左；
}
#内容，#页脚，#页眉{
身高：100%；
}

微粒






一个
两个
三
四

您可以使用透明的背景图像（.png或.gif）并将它们分配到每个div中的一个位置，还可以使用绝对定位的div和z索引继承权来实现您所追求的视觉效果，尽管如果站点需要布局响应，您可以使用此方法完成大量工作

例如，在所选图像编辑器中提取顶部曲线（白色位和蓝色位），确保背景保持透明并正确保存。那么，这只是一个使用代码的例子，其内容如下：

//STYLES CSS
.splash{
   background-image:url("icewater.jpg");
   width:1289px;
   height:513px;
   position:relative;
   z-index:1;
}
.top-curved-section{
   position:relative;
   top:0;
   left:0;
   z-index:2;
   background-image:url("blue-white-curve.gif");
   background-repeat:no-repeat;
   background-position:top left;
//Padding to get your logo element to display properly
   padding: 20px 0 0 20px;
//These heights are guesses to force the size of the div for background image
   width:400px;
   height:150px;
}

HTML，以其最简单的形式：

    <div class="splash">
<div class="top-curved-section">
<img src="yourlogo.png" alt="Your Logo">
</div>
</div>

---

你可能想用一个背景图像。不是CSS。谢谢你完整的awsner，我将拍摄图片并尝试这样做。

.bottom-curved-section{
       position:relative;
       bottom:0;
       right:0;
       text-align:right;
       z-index:2;
       background-image:url("blue-white-curve2.gif");
       background-repeat:no-repeat;
    background-position:bottom right;
    //Padding to get your logo element to display properly
       padding: 0 20px 20px 0;
    //These heights are guesses to force the size of the div for background image
       width:400px;
       height:150px;
    }