css ile görüntünün içindeki eğri

Question

Mümkün ve resmin üst ve alt kısımlarında nasıl bir eğri oluşturabilirim, resme bakın. Bunu css ile nasıl başarabilirim?

Answer 1

bir div bir arka plan-resim olarak görüntü ayarlayın ve bu tekniği kullanır. Örneğimde koyu kırmızı bir renk kullandım.

Burada, üst ve alt kısımdaki eğrileri oluşturmak için sahte öğeler kullandım. Üst ve alt ofset, her sözde öğenin yüksekliğinin yarısıdır ve kenarlık yarıçapı% 50'ye ayarlanır.

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>