0

Как задать такую рамку как на скрине?

Чтобы была сверху в виде стрелки, угла (не знаю как еще сказать).
Bот рабочий пример - //codepen.io/anon/pen/xGMwQo.

1 ответ 1

2

С помощью псевдоэлементов :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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.