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>