CODEWITHSUNDEEP
htmlcss
John Doe
John Doe

Reputation: 601

HTML, CSS custom overlay

I will attach an image with the effect I'm trying to achive using html and css.

enter image description here

Instead of the black color, I'll have an image, and I want to make an white overlay to give the impression of a round bottom. This could be done using an background image but I'd like to make this using css and keep that option as a last resort.

Upvotes: 0

Views: 129

Answers (3)

Hemant Kumar
Hemant Kumar

Reputation: 367

This shape can be achieved by using 2 HTML elements.

We set the rectangular primary element to overflow: hidden.

The child element should be shaped as an oval (can be done via border-radius), and scaled+translated a bit so that it has only the bottom edge within the main element area.

Please try this jsFiddle.

Upvotes: 1

Paolo Forgia
Paolo Forgia

Reputation: 6748

Setting 50% to border-bottom-left-radius and border-bottom-right-radius should give you the expected results.

border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;


div {
  background-color: black;
  width: 400px;
  height: 50px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
<div></div>

Upvotes: 1

caramba
caramba

Reputation: 22480

Something like this:

div {
    background-color: orange;
    width:500px;
    height:200px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
    overflow: hidden;
}
<div>
    <img src="http://lorempixel.com/output/city-q-c-640-480-5.jpg">
</div>

Upvotes: 1

Related Questions