It is necessary to cut the edge of the background in this way, behind the background is also made a picture.

It is necessary to cut the edge of the background in this way, behind the background is also made a picture.

Closed due to the fact that the essence of the question is incomprehensible by the participants cheops , Streletz , Saidolim , aleksandr barakin , Denis 12 Sep '16 at 6:56 .

Try to write more detailed questions. To get an answer, explain what exactly you see the problem, how to reproduce it, what you want to get as a result, etc. Give an example that clearly demonstrates the problem. If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    For example, using the clip-path :

     .wrap { background: url(https://images.unsplash.com/photo-1459445364195-16475050193c?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1163&q=80&cs=tinysrgb) center no-repeat; -webkit-background-size: cover; background-size: cover; padding: 2rem; } .box { width: 100%; height: 280px; background: url(http://bennettfeely.com/clippy/pics/pittsburgh.jpg) center no-repeat; -webkit-background-size: cover; background-size: cover; -webkit-clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%); clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, 25% 50%, 0% 0%); } 
     <div class="wrap"> <div class="box"> </div> </div>

    • one
      Helen is only a small BUT does not work in FF IE and opera - only svg is suitable in this case - user33274
    • @Geyan, then cut out so background, with these corners. This is not a standard layout task. - HamSter
    • Yes, naturally, I drew on svg, but I cannot do 100% of the screen, save the output as an image, I do not quibble - as before, any answer you have added to the toaster that on ruSO - user33274
    • Thank you very much, this is what I need. Live and learn . - Eldar Gucherenko