html - 使用 CSS 创建一个非常浅的弯曲边缘 div

Question

我正在尝试为具有单一且非常浅/宽的曲线的导航栏创建一个 div，如下面的 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;
}