CSSを使った画像内の曲線

Question

画像の上下に画像を描くことができますか？画像を参照してください。どのように私はCSSでこれを達成することができますか？

Answer 1

のdivに背景画像としてあなたのイメージを設定し、この技術を使用しています。私は私の例では赤い色を使用しました。

ここでは、擬似要素を使って上下のカーブを作成しました。上下のオフセットは各擬似要素の高さの半分であり、境界半径は50％に設定されていることに注意してください。

div { 
 
    width:500px; 
 
    height:200px; 
 
    background:red; 
 
    position:relative; 
 
    overflow:hidden; 
 
} 
 
div:after, 
 
div:before { 
 
    content:''; 
 
    background:white; 
 
    position:absolute; 
 
    top:-10px; 
 
    left:0; 
 
    width:100%; 
 
    height:20px; 
 
    border-radius:0 0 50% 50%; 
 
} 
 
div:after { 
 
    top:auto; 
 
    bottom:-10px; 
 
    border-radius:50% 50% 0 0 ; 
 
}

<div></div>