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>