How to set such a frame as in the screenshot?

That was above in the form of an arrow, the angle (I do not know how else to say).
A working example is //codepen.io/anon/pen/xGMwQo .

    1 answer 1

    With the help of pseudo-elements :before and :after .
    The example is not perfect, but you can continue to dig from it.

     .unusual { position: relative; display: inline-block; border-top: 0; overflow: hidden; } .unusual img { border: 4px solid blue; width: 400px; } .unusual:before, .unusual:after { position: absolute; top: -14%; content: ''; display: block; border: 4px solid blue; width: 60%; height: 30%; background: white; } .unusual:before { left: -15%; transform: rotate(-30deg); } .unusual:after { right: -15%; transform: rotate(30deg); } 
     <div class="unusual"> <img src="http://static.jsbin.com/images/dave.min.svg"> </div>