enter image description here enter image description here

An example in the picture. Center button, right and left translucent layers. The question is how to make the right part of the background in pure CSS, I want to do it without pasting a picture. thank

    3 answers 3

    You can still like that. But here, too, there are problems:

    1. Some kind of confused scaling. I have not figured it out yet.
    2. The semicircular cut is made with the help of a Bezier curve; it is not a circle, but only an approximation to a circle.

    * { padding: 0; margin: 0; } body { background-image: url(http://beerhold.it/400/300); background-size: cover; width: 100vw; height: 100vh; } div { width: 50vw; height: 100vh; position: relative; } 
     <div> <svg width="100%" height="100%" viewbox="0 0 100 100"> <path d="M0 0 L0 100 L100 100 L100 0 Z M100,60 C 86.33,60 86.33,40 100,40 Z" style="fill-rule: nonzero; fill: rgba(255,255,255,.8);" /> </svg> </div>

    • Approximation suits, there the size of the element is not more than 50 px - Vyacheslav Potseluyko
    • And what prevents to use A instead of C ? - Qwertiy ♦
    • @Qwertiy specify what is meant. Your thought is incomprehensible to me - Vyacheslav Potseluyko
    • @Qwertiy just yesterday began to delve into the svg, we will reach A.) - Andrey Fedorov
    • @VyacheslavPotseluyko, talking about the d attribute of the path tag. C is a curve - Bezier curve. It is impossible to give her a circle exactly - it can only be approached. And this is stated in the answer. But there is a - arc, with which you can set the arc. If you need a complete circle (not considered in detail), you should put two arches in a row. It seems logical. So I asked if there were any reasons for not doing this. - Qwertiy ♦

     * { padding: 0; margin: 0; } body { background-image: url(http://beerhold.it/400/306); background-size: cover; } .block { width: 50vw; height: 100vh; position: relative; background-color: rgba(0,0,0,.5); } .key { position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); width: 4em; height: 4em; box-sizing: border-box; border: .5em solid black; background-color: white; border-radius: 4em; } 
     <div class="block"> <div class="key"> </div> </div>

    • @AndreyFedotov, I explain sucks. Please look at the second photo in the post. Maybe it will be so clearer. Thank you - Vyacheslav Potseluyko
    • @VyacheslavPotseluyko Yes, it's more understandable. Do you need adaptability? - Andrey Fedorov
    • Ideally, yes, otherwise I would have made a picture and scored. But I will deal with this myself, tell me the implementation of at least that. Thank you) - Vyacheslav Potseluyko
    • @VyacheslavPotseluyko needs to emulate a common background with the background button. Picking up the position of backgrounds can achieve the illusion of transparency of the button. But to make it adaptive is almost unreal. - Andrey Fedorov
    • and without adaptability? - Vyacheslav Potseluyko

     .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, .5); background-image: url(http://beerhold.it/960/722); background-size: 960px 720px; background-position: center center; border-radius: 10em; } .block1, .block2 { position: absolute; top: 0; width: 480px; height: 720px; } .block1 { left: 0; background-color: rgba(255, 255, 0, .4); } .block2 { right: 0; background-color: rgba(0, 0, 255, .4); } 
     <div class="wrapper"> <div class="block1"></div> <div class="block2"></div> <div class="key"></div> </div>

    • @AndreyFedotov, in your opinion, is the option using the clip-path: circle(50% at 0 50%); may come up? - Vyacheslav Potseluyko
    • @VyacheslavPotseluyko Can't, because here caniuse.com/#search=clip-path - Andrey Fedorov
    • I am morally ready to score on the family ie. Only need as a result a polygon, one of the boundaries of which will be a concave semi - circle - Vyacheslav Potseluyko