用CSS创建一个非常浅的弧形边缘div

Question

我正在尝试为导航栏创建一个div，其中包含一条非常浅/宽的曲线，如下面{h}}下面的psd设计所示

这是一个最接近的代码涂鸦我已经能够在codepen中得到它...     http://codepen.io/pottymus/pen/KJCcL

我已经玩过边界 - 半径范围内的年龄数字，但是我已经接近但不太相似。我不能重叠构成导航的2个形状，因为它们是半透明的（或部分透明的），因此重叠显示。有谁知道如何让曲线的边缘更像我的照片？即，曲线的边缘/末端较少，而是看起来更好地融入上面的矩形div？

Answer 1

你不能用边界半径定义S相似的曲线（比如你需要的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;
}