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

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

enter image description here

我的问题，现在实际上是，我不知道，如何实现HTML/CSS该布局，如绿色导航栏“弯曲”是不是在页面中间。布局应该灵活，所以我甚至不想使用包含弯曲和居中的一个大图像（2500x75像素）。如果有两个元素，一个从左侧开始标识，另一个从右侧开始，则会更好。

你会如何意识到这一点？

来源

2012-07-31 chris.ribal

你坚持什么？没有试图不屑一顾，这似乎并不困难;所以我不确定我是否可能在某处丢失了一个细节。 – 2012-07-31 22:22:43

您可以重复背景，例如较粗和较细的线条，只切割导航的凹凸部分。 – 2012-07-31 22:23:23

模糊的图像困扰着我的眼睛=/ – 2012-07-31 22:31:29

你可以做一些事情旋转<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歪斜：jsFiddle

来源

2012-07-31 22:38:09

andcourse，告别较旧的浏览器:)更好的解决办法是把一些png放在角落里。 – 2012-07-31 22:40:45

@MiljanPuzović：只要功能和可用性不受影响，就可以为现代浏览器保留增强功能并让旧版本的用户体验降级。 – 2012-07-31 22:42:15

让我们做一个完整的IE6支持JPG） – 2012-07-31 22:42:46

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

回答

相关问题