CODEWITHSUNDEEP
htmlcssimagesass
Mauricio Ross
Mauricio Ross

Reputation: 1

css image with border-radius

I am trying to replicate this style, which has a background image, on the other hand I have a div over it that has a right border-radius, I can't do it, I provided the following options adapting them, but I couldn't

enter image description here

Transparent hollow or cut out circle

div{
    position:relative;
    width:500px; height:200px;
    margin:0 auto;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    left:175px; top:25px;
    border-radius:100%;
    width:150px; height:150px;
    box-shadow: 0px 0px 0px 2000px #E3DFD2;
}

body{background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg';

Background with radius-top inside

div {
    background:lightgreen;
    width:100%;
    height:200px;
    position:relative;
    text-align:center;
    padding:100px 0 0 0;
    box-sizing:border-box;
}
div:before {
    content:'';
    position:absolute;
    background:white;
    width:100%;
    height:100px;
    top:0;
    left:0;
    border-radius:40%;
    transform:translatey(-50%);
}

Upvotes: 0

Views: 1199

Answers (2)

نور
نور

Reputation: 1527

you can do this by clip-path property ..

Note : minimum width required otherwise shape will not display

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
width: 100%;
margin: 0 auto;
display: flex;
}
.left{
  width: 10%;
}

.image {
  width: 90%;
  height: 400px;
  overflow: hidden;
  background: url(https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg);
  background-size: cover;
  clip-path: circle(100% at 100% 50%);

}
<div class="container">
  <div class="left">
  </div>
  <div class="image">
  </div>
</div>

Upvotes: 0

Jasmine
Jasmine

Reputation: 473

The cut out example with the circle suits fine, You just need to play around with the values in the DevTools/Inspector. Adjust heights/widths of the :before to stretch the curve to your liking or even mess with % of border radius, then the border width for how much space around it, the top and left to position it to the edges, then use the parent container to trim off right and bottom areas.

.banner {
  background: url(https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg);
  background-size: cover;
}

.shape {
  position: relative;
  width: 170px;
  height: 440px;
  overflow: hidden;
}

.shape:after {
  content: '';
  position: absolute;
  left: -100px;
  top: -200px;
  border-radius: 100%;
  width: 151px;
  height: 440px;
  border: 200px solid #ffffff;
}
<div class="banner">
  <div class="shape">
  </div>
</div>

Upvotes: 1

Related Questions