CSS-эффект для имитации фотографий с вставленными углами.

 <div class="esquinas">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht59mc5KoHHhy9FdYvSYZ2p245FQHlC1_0tcoZ3v27ffHp96jwA2sR6d7buNePhqpbMzIvJEGqjFakaSIsEhF87ifEz9bENO6Va07F1ehXIm7WrpWM4vKLUE2kHi6Nf089uEj3uoBZw5Xt/s1600/DSC_7716_600.jpg" />
</div><br />

 <style type="text/css">

.esquinas { position: relative; display: table; max-width: 90%; margin: 50px auto; } .esquinas img { display: table-cell; max-width:100%; height: auto; margin: 0 auto; padding: 8px; background: #fff; box-shadow: 0 0 2px #666; box-sizing: border-box; } .esquinas:before, .esquinas:after { position: absolute; content: ""; height: 40px; width: 80px; background: #ccc; /*El mismo color que el fondo de la página*/ -webkit-transform: rotate(-45deg);transform: rotate(-45deg); } .esquinas:before { bottom: -20px; right: -40px; box-shadow: 0 -6px 9px -8px #333; } .esquinas:after { top: -20px; left: -40px; box-shadow: 0 6px 9px -8px #333; } /* Hack sólo para Blogger*/ .separator a { margin-left: 0 !important; margin-right: 0 !important; }

 </style><br />

https://www.oloblogger.com/2014/12/esquinas-imagenes-insertadas-fondo.html