我希望像我发布的这张图片一样弯曲的div

Question

在此图像中，导航栏位于半圆形弯曲div中。如何重新创建此效果？无论是需要CSS还是Javascript，我都希望代码能够创建它。

我试过了：

body {
    background-color:#900;
    margin:0;
}
#first {
    width:38%;
    height:40px;
    background-color:#963;
    -webkit-transform:rotate(8deg);
    float:left;
}

#middle {
    width:20%;
    height:250px;
    background-image:url(file:///E|/bollywoodGrill/website3/images/logo.jpg);
    float:left;
}

#second {
    width:38%;
    height:40px;
    background-color:#963;
    -webkit-transform:rotate(175deg);
    float:left;
    margin-top:10px;
}

使用此HTML：

<div id="first"></div>
<div id="middle"></div>
<div id="second"></div>

http://jsfiddle.net/CzePX/

如何使这个外观圆润？

Answer 1

只使用CSS或JavaScript，您将很难在图像中创建任何接近设计的内容。这显然是一个Photoshop设计，它也应该看起来像一个Photoshop设计。如果你想尽可能接近图片中的半圆，这里有一个小提琴：http://jsfiddle.net/2QwmW/

<div class="container">
    <div class="circle"></div>
</div>

.container {
    width: 800px;
    height: 200px;
    overflow: hidden;
    position: relative;
    background: #ab632a;
}

.circle {
    position: absolute;
    z-index: 1;
    width: 2000px;
    height: 2000px;
    border: 50px solid rgba(80, 0, 0, .5);
    left: 50%;
    margin-left: -1050px;
    top: -1950px;
    border-radius: 50%;
}

.container:before,
.container:after {
    content: '';
    width: 100px;
    height: 100%;
    position: absolute;
    z-index: 100;
    top: 0;
}

.container:before {
    left: 0;
    background-image: linear-gradient(to right, #ab632a, rgba(170, 98, 43, 0));
}

.container:after {
    right: 0;
    background-image: linear-gradient(to left, #ab632a, rgba(170, 98, 43, 0));
}

但这只是半圆，旋转的文本可以插入绝对位置和-webkit-transform：rotate（XXdeg）;