css image with border-radius

Question

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%);
}

score 1 · Answer 1 · answered Sep 16 '20 at 04:27

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>

score 0 · Answer 2 · answered Sep 16 '20 at 05:36

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>

css image with border-radius

2 Answers2