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

Question

我正在尝试为具有单个且非常浅/宽曲线的导航栏创建一个 div，如下面的 psd 设计所示

这是到目前为止我在 codepen 中能够得到的最接近的代码涂鸦...... http://codepen.io/pottymus/pen/KJCcL

多年来，我一直在研究 border-bottom-radius 中的数字，但我已经接近但还不够。我不能重叠构成导航的 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;
}