jquery - 我想要像我发布的这张图片那样 flex 的 div

Question

在此图像中，导航栏位于半圆形 flex 的 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 设计。如果你想尽可能接近图片中的半圆，这里有一个 fiddle :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);