背景画像付きのdivで曲線を作成する

Question

私は1つのタスクが残っているので、インターネット上で解決策を見つけることができません。

画像1と2は、背景画像を持っています 私はこのような状況を持っています。

私はその1つまたは2つ目のイメージにそのバンプが必要です。
最初のイメージであれば、そのバンプはdivボトムを拡張し、2番目のバックグラウンドをオーバーレイする必要があります。
2番目のdivの場合は、上部にクレーター/穴のようになり、1番目のdivの下に来る必要があります。

イメージを.png/.gifにカットし、フォトショップでそのバンプでカットすることはできません。これらの画像はクライアントによって変更されるため、常に正確な画像を作成することができないため、コードで拡張する必要があります。

ラジアルグラデーション（）をバックグラウンドにしてsvgでカットしようとしましたが、Firefoxではサポートされていません。

すべての背景画像に適応するコードでこれを行うことは可能ですか？

Answer 1

ここでは、background-size：coverを使用するソリューションがあります。適応するのが簡単です。 （既知の寸法画像ではより簡単になります）。

欠点は、少し複雑なマークアップです.3つの補助divが必要です。それを調整することができるので、あなたは、あなたがSVGでクリッピング使用できる画像を使用してこれを行うことができない場合

.container { 
 
    width: 600px; 
 
    height: 400px; 
 
    border: solid 1px blue; 
 
    position: relative; 
 
} 
 
.up { 
 
    width: 100%; 
 
    height: 50%; 
 
    position: relative; 
 
    border-bottom: 40px solid transparent; 
 
    background-image: url(http://lorempixel.com/600/400); 
 
    background-size: cover; 
 
    background-position: center bottom; 
 
    background-origin: border-box; 
 
    background-clip: padding-box; 
 
    margin-bottom: -40px; 
 
} 
 
.addon { 
 
    width: 25%; 
 
    height: calc(100% + 40px); 
 
    position: absolute; 
 
    left: 37.5%; 
 
    border-radius: 0px 0px 50px 50px; 
 
    overflow: hidden; 
 
    background-image: inherit; 
 
    z-index: 2; 
 
} 
 
.addon:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 400%; 
 
    height: 100%; 
 
    left: -150%; 
 
    background-image: inherit; 
 
    background-size: cover; 
 
    background-position: center bottom; 
 
    background-origin: padding-box; 
 
    background-clip: padding-box; 
 
} 
 
.down { 
 
    width: 100%; 
 
    height: 50%; 
 
    position: relative; 
 
    bottom: 40px; 
 
    border-top: 40px solid transparent; 
 
    background-image: url(http://lorempixel.com/400/200); 
 
    background-size: cover; 
 
    background-position: center top; 
 
    background-origin: border-box; 
 
    background-clip: padding-box; 
 
    margin-top: -40px; 
 
} 
 
.addleft { 
 
    width: 37.5%; 
 
    height: calc(100% + 40px); 
 
    position: absolute; 
 
    left: 0px; 
 
    bottom: 0px; 
 
    border-radius: 0px 50px 0px 0px; 
 
    overflow: hidden; 
 
    background-color: tomato; 
 
    background-image: inherit; 
 
    background-size: 0px 0px; 
 
} 
 
.addleft:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 266.667%; 
 
    height: 100%; 
 
    left: 0px; 
 
    background-image: inherit; 
 
    background-size: cover; 
 
    background-position: center top; 
 
    background-origin: padding-box; 
 
    background-clip: padding-box; 
 
} 
 
.addright { 
 
    width: 37.5%; 
 
    height: calc(100% + 40px); 
 
    position: absolute; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    border-radius: 50px 0px 0px 0px; 
 
    overflow: hidden; 
 
    background-image: inherit; 
 
    background-size: 0px 0px; 
 
} 
 
.addright:before { 
 
    content: ""; 
 
    position: absolute; 
 
    width: 266.667%; 
 
    height: 100%; 
 
    right: 0px; 
 
    background-image: inherit; 
 
    background-size: cover; 
 
    background-position: center top; 
 
    background-origin: padding-box; 
 
    background-clip: padding-box; 
 
}

<div class="container"> 
 
    <div class="up"> 
 
    <div class="addon"></div> 
 
    </div> 
 
    <div class="down"> 
 
    <div class="addleft"></div> 
 
    <div class="addright"></div> 
 
    </div> 
 
</div>

Answer 2

あなたはボーダー色

ボーダー色を使用する必要があります：透明透明＃555透明に。

基本的に、画像の境界線の左右のある割合を透明にする必要があります。その後、

そして、カーブに

感謝を与えることボーダー半径を設定します。