Как задать такую рамку как на скрине?
Чтобы была сверху в виде стрелки, угла (не знаю как еще сказать).
Bот рабочий пример - //codepen.io/anon/pen/xGMwQo
.
С помощью псевдоэлементов :before
и :after
.
Пример не идеальный, но уже от него можно продолжать копать.
.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>