CODEWITHSUNDEEP
htmlcss
Bas
Bas

Reputation: 2400

Curve inside image with 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?

enter image description here

Upvotes: 8

Views: 10830

Answers (1)

partypete25
partypete25

Reputation: 4413

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

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>

Upvotes: 11

Related Questions