0

Собственно есть рамка в фотошопе, но как сверстать - не знаю. Получается криво.. Делал через border-image

введите сюда описание изображения

1
  • Используй border-image
    – Qwertiy
    28 июл 2016 в 9:01

1 ответ 1

4

Как вариант, на основе jsfiddle #1, jsfiddle #2
display: inline-block для срабатывания верхнего margin без этого он схлопывается и эффекта бордера не будет.

.outside {
  background-color: transparent;
  background-size: 14px 14px;
  background-image: repeating-linear-gradient(-45deg, black, black 5px, transparent 5px, transparent 10px);
  height: 100px;
  width: 200px;
}

.inside {
  background: white;
  margin: 10px;
  height: 80px;
  display: inline-block;
  width: 180px;
}
<div class="outside">
  <div class="inside"></div>
</div>

Поддержка repeating-linear-gradient

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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