使用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

回答

相關問題