There is a block with pictures:

enter image description here

Above the first picture there is an element in the form of a rounded arrow, the background of which is a continuation of the picture? If there were no shadows in the block, then one could insert a white png-image with transparency in the place of the rounded arrow. How can you impose such an element as in the image, in the case of the shadow of the block?

  • 1) Choose a similar color. 2) Insert the image slightly hidden at the top (via background-position ) and the arrow to display the hidden. - user207618
  • Do not quite understand. Can you write more? - Frontender
  • We make a white "cap" for each picture. For the cap, write the shadow. For inactive items, the header is solid. For active - with a slot. - DimXenon

4 answers 4

As I understand it, you need a curly trim with a shadow in the shape of this trim.

 img { height:220px; clip-path: polygon(0 20px, 80px 20px, 100px 0, 120px 20px, 200px 20px, 200px 220px, 0 220px); -webkit-clip-path: polygon(0 20px, 80px 20px, 100px 0, 120px 20px, 200px 20px, 200px 220px, 0 220px); } div { filter: drop-shadow(0 0 10px gray); -webkit-filter: drop-shadow(0 0 10px gray); } 
 <div><img src="https://pixabay.com/static/uploads/photo/2015/12/23/08/43/flowers-1105254_960_720.jpg"><div>

Browser features and limitations: clip-path , filter .

It is important that the filter is applied to the parent block, otherwise it is applied to the image before cropping, like box-shadow, border-radius and border. I could not round the corners. Found online service selection parameters clip-path

  • Thank you very much! - Frontender
  • @ViktorPavlov, supplemented the answer - sercxjo
  • It turns out that IE does not support at all? - Frontender
  • @ViktorPavlov, did not check, I haven’t been counting on him for a long time, well, there will be a worse view, uncircumcised pictures and no shadow. Let IE die in peace. Edge seems to support filter caniuse.com/#search=filter , with the clip-part, the problem still remains. - sercxjo

In general, it can be a block of similar color as the picture. Here, for example, a semicircle

 .round{ height:400px; width:400px; border-radius:50%; position: absolute; clip: rect(0, 400px, 200px, 0); background: black; } 
 <div class="round"></div>

  • There are many blocks on the page, pictures will be added via CMS. Therefore, your option is not suitable. - Frontender

Initially I did not understand your question. For these purposes, you do not need to fence the figures from css and html. You need to either take a translucent png image, or use fonts, for example http://fontawesome.io/icon/map-marker/

    Easy. Need to cut 2 pictures. 1 will be solid white already with a shadow, and the second with the desired slot. And then we write the code:

     .img-container{ position: relative; } .img-container:before{ content: ''; height: 7px; width: 100%; position: absolute; top: 0; left: 0; background-image: url(../img.png); /*Тут прописываем картинку без прорези*/ } .img-container:hover:before{ background-image: url(../img1.png); /*Тут картинка с нужной прорезью*/ }

    for example