用css弯曲图像内部 [英] Curve inside image with css

问题描述

有可能吗，如何在图像的顶部和底部绘制曲线，请参见图像。我如何使用CSS实现此目标？

Is it possible and how can i make a curve inside a image top and bottom, see image. How can i achieve this with css?

推荐答案

将图像设置为div上的背景图像并使用此技术。在示例中，我使用了纯红色。

Set your image as a background-image on a div and use this technique. I've used a solid red colour in my example.

在这里，我使用伪元素在顶部和底部创建曲线。请注意，顶部和底部偏移量是每个伪元素高度的一半，并且边界半径设置为50％。

Here i used pseudo elements to create the curves on the top and bottom. Notice the top and bottom offset is half of that of the height of each pseudo element and the border radius is set to 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>

这篇关于用css弯曲图像内部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！