使用CSS创建

我试图创建一个单一的和很浅/宽曲线导航栏一个div一个很浅的曲刃格如在我下面 PSD mockup I am trying to copy 使用CSS创建

这里PSD设计最亲密的我的代码涂鸦已经能够得到它迄今在codepen ... http://codepen.io/pottymus/pen/KJCcL

我已经玩了边界下半径的年龄的数字，但我越来越接近，但不是那里。因为它们是半透明的（或部分透明），所以我不能重叠组成导航的两个形状，因此重叠显示。有人知道如何使曲线的边缘更像我的照片吗？即具有较少的曲线的确定的边缘/端部，而是似乎更好地融合到上面的矩形div中？

来源

2013-09-28 user2317093

这是困难的，因为你不能用你的导航欺骗和以负值更改保证金。如果你有一个不透明的菜单：1，这是可行的 –

是的，也许我只需要制作一个真正巨大的透明曲线形状并从画布上偏移。我试图得到建议，看看这是否可能是诚实的。 – user2317093

如何添加内联svg路径''然后将导航元素放置在其顶部。如果你将psd导入illustrator，你应该能够抓住你的曲线路径，而不会有太多的麻烦。 –

不能定义小号一样曲线（如Besier，你需要有）与边界半径，所以这是最接近你可以与他们取得：

.curve { 
    height: 30px; 
    width: 90%; 
    background-color: rgba(255, 255, 255, 0.7); 
    border-bottom-left-radius: 50% 30px ; 
    border-bottom-right-radius: 50% 30px ;  
    margin: 0 auto; 
    display: block; 
}

来源

2013-09-28 17:37:02

谢谢你我开始想到你可能是对的，看起来像我做出了决定。 – user2317093

回答

相关问题