2

以下のpsdデザインに示すように、単一の非常に浅い/広い曲線を持つナビゲーションバーのdivを作成しようとしていますコピーしようとしているPSDモックアップ

これは、codepen でこれまでに取得できた最も近いコードの落書きです... http://codepen.io/pottymus/pen/KJCcL

私はボーダーボトム半径の年齢の数字をいじりましたが、近づいていますが、完全には到達していません. ナビゲーションを構成する 2 つの形状を半透明 (または一部透明) に重ねることができないため、重なりが表示されます。曲線の端を私の写真のようにする方法を知っている人はいますか? つまり、曲線の明確なエッジ/エンドが少なくなり、代わりに上の長方形の div にうまく溶け込むように見えますか?

4

1 に答える 1

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;
}
于 2013-09-28T17:37:02.087 に答える