html - 如何将此布局转换为 html/css？

Question

我的合作伙伴设计机构给我发了一个要转换成 html/css 的布局。你可以在这里看到一些布局，顶部的导航栏是唯一需要的。

我现在的问题实际上是，我不确定如何在 html/css 中实现该布局，因为绿色导航栏中的“弯曲”不在页面中间。布局应该是灵活的，所以我什至不想使用一张大图像（2500x75 像素），包括弯曲和居中。最好有两个元素，一个是从左侧开始的徽标，另一个是从右侧开始的导航链接。

你怎么会意识到这一点？

Answer 1

你可以做一些旋转的事情<div>，也许是这样的：

<div class="full"></div>
<div class="half">
    <div class="corner"></div>
</div>​

.full{
    height: 40px;
    background: lightgreen;
}
.half{
    width: 50%;
    height: 30px;
    position: absolute;
    top: 40px;
    left: 0;
    background: lightgreen;
}
.corner{
    width: 50px;
    height: 50px;
    -webkit-transform: rotate(40deg);
    -webkit-transform-origin: 100% 100%;
    position: absolute;
    right: 0px;
    top: -20px;
    background: lightgreen;   
}

现场演示：jsFiddle

使用 css skew 改进的演示：jsFiddle ​</p>