Requires specific clip-path: polygon() pointwise. Any example in the code below.

 .wrapper { width: 960px; height: 720px; display: flex; align-items: center; justify-content: center; margin: 0 auto; background-image: url(http://beerhold.it/960/722); background-repeat: no-repeat; backgorund-position: center center; position: relative; } .key { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 10em; height: 10em; border: 2em solid rgba(255, 255, 255, .3); border-radius: 10em; } .block1, .block2 { position: absolute; top: 0; width: 480px; height: 720px; } .block1 { left: 0; background-color: rgba(255, 0, 0, .2); } .block2 { right: 0; } .block3 { top: 0; width: 100%; height: calc(50% - 7em); background: rgba(0, 0, 0, 0.7); } .block4 { top: calc(50% - 7em); background: rgba(0, 0, 0, 0.7); width: 100%; height: 14em; clip-path: polygon(1% 0%, 100% 0%, 100% 100%, 0% 100%, 8% 94%, 15% 88%, 22% 78%, 29% 69%, 34% 60%, 34% 48%, 33% 36%, 30% 22%, 23% 14%, 12% 7%); } .block5 { bottom: 0; height: calc(50% - 7em); width: 100%; background: rgba(0, 0, 0, 0.7); } 
 <div class="wrapper"> <div class="block1"></div> <div class="block2"> <div class='block3'></div> <div class='block4'></div> <div class='block5'></div> <div class='block6'></div> </div> <div class="key"></div> </div>

As it is noticeable, at the moment it is just a curve, concave in a figure. The task is to draw a semicircle (or as close as possible to it), concave in the shape. In my understanding, this requires less , sass and more. And also sin , cos . I don’t understand what and how to start, I didn’t come across it. Thanks @AndreyFedorov for the piece of his code used here.

(!) I agree on any other options that give the same result.

enter image description here

  • 1. Can you draw a picture, what exactly is required to get? 2. Wouldn’t svg be used instead? - Qwertiy ♦
  • @Qwertiy you can - use. Now I will correct this question and dokina picture. - Vyacheslav Potseluyko
  • Impose a round thing over the top can not? That is, what should be done? Is some kind of transparency? Or a text wrapping around the figure, or something else? - Qwertiy ♦
  • developer.mozilla.org/ru/docs/Web/CSS/clip-path#CSS - Qwertiy ♦
  • @Qwertiy translucent black background on the left. Right similar, but white. The background of the button is the same as the block background on the right. The cutout between the button and the block on the right is translucent black. Behind them the same background image - Vyacheslav Potseluyko

1 answer 1

Necessary coordinates in path :

  • 120 is the radius of the circle; if you need to reduce, then reduce both coordinates
  • 240 - block height
  • 1000 - block length

If necessary, rotate the cutout, use the attribute transform="rotate()"

 * { margin: 0; padding: 0; } .btn { position: absolute; width: 240px; height: 240px; border-radius: 50%; border: 10px solid rgba(255,255,255,0.4); top: 130px; left: -120px; background: transparent; box-sizing: border-box; } .btn:hover { border-color: rgba(255,255,255,0.7); } .image { background-image: url(https://s3.amazonaws.com/finely/resources/test.jpg); background-size: cover; background-position: center; width:100%; height:500px; } .image__right { position: absolute; width:50%; right: 0; top: 0; } .placeholder { height:130px; background: rgba(0,0,0,0.5); } .border-mask { height: 240px; background: rgba(0,0,0,0.5); -webkit-clip-path: url(#circleClip); clip-path: url(#circleClip); } 
 <div class="image"> <div class="image__right"> <div class="placeholder"></div> <button class="btn">click me</button> <div class="border-mask"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 240" x="0px" y="0px"> <defs> <clipPath id="circleClip"> <path d="M0,0c65.4,0,120,53,120,120S65.4,240,0,240h1000V0H0z"/> </clipPath> </defs> </svg> </div> <div class="placeholder"></div> </div> </div>