9

Какие есть варианты и способы отрисовки подобной границы для блока?

Эта граница внутри блока с фоновой картинкой (неоднородный фон). От краев на 15px. Внутри прозрачное. Граница прерывистая.

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

.box {
  position: relative;
  margin-bottom: 20px;
  padding: 15px;
}

.box-inner {
  width: 100%;
  height: 100%;
    background-clip: padding-box; 
  border: solid 2px transparent;
}

.box:after {
  content: '';
  position: absolute;
  top: 15px;
  left:15px;
  right: 15px;
  bottom: 15px;
  background: linear-gradient(to right, red, orange);
}

.box-1 {
  width: 200px;
  height: 200px;
  background: url(https://picsum.photos/200/300);
}

.box-2 {
  width: 200px;
  height: 500px;
  background: url(https://picsum.photos/200/300);
}
<div class="box box-1">
  <div class="box-inner"></div>
</div>
  
  <div class="box box-2">
  <div class="box-inner"></div>
</div>

background-clip: padding-box; не работает.

7
  • 2
    Можно по аналогии с вот этим сделать: ru.stackoverflow.com/a/1061545/178988
    – Qwertiy
    11 мар 2020 в 17:15
  • @Qwertiy, у меня под этим вопросом пропала надпись "назначить конкурс" и не могу ни где найти ее 12 мар 2020 в 10:39
  • По идее она и не появлялась - вопрос слишком новый.
    – Qwertiy
    12 мар 2020 в 11:55
  • @Qwertiy, вчера было написано что смогу начать конкурс завтра, но сегодня вообще не кнопки ннет ничего 12 мар 2020 в 16:04
  • Попробуй через 2 с половиной часа.
    – Qwertiy
    12 мар 2020 в 16:28

2 ответа 2

15
+100

Эх... Если бы <img> держал псевдоэлементы, то код был бы ещё короче. А пока так:

div.img-inner-border { position: relative; display: inline-block; }

div.img-inner-border::before {
  content: '';
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 19px;
  background: 
    linear-gradient(90deg, #6de0f5, #d8a960, #6de0f5) 0 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 100%/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #6de0f5) 0 100%/1px 100% no-repeat;
}
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-270x180-LonelyBloom-plain.jpg"></div>
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-90x180-LonelyBloom-plain.jpg"></div>
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-250x100-LonelyBloom-plain.jpg"></div>


Для размещения разрыва рамки с другой стороны, нужно поменять размеры, позиции и направление (наклон) градиентов:

div.img-inner-border { position: relative; display: inline-block; }

div.img-inner-border::before {
  content: '';
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 19px;
  
  /*                наклон       цвета градиента      позиция  размеры   повтор  */
  /*                   |        /       |       \      X   Y    X   Y      |     */
  /* linear-gradient(90deg, #6de0f5, #d8a960, #6de0f5) 0 100%/100% 1px no-repeat */
  
  /* Разрыв вверху
  background: 
    linear-gradient(90deg, #6de0f5, #d8a960, #6de0f5) 0 100%/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #6de0f5) 0 100%/1px 100% no-repeat; */
    
  /* Разрыв слева */
  background: 
    linear-gradient(0deg, #6de0f5, #d8a960, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #6de0f5) 100% 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #6de0f5) 0 100%/100% 1px no-repeat;
    
  /* Разрыв справа
  background: 
    linear-gradient(0deg, #6de0f5, #d8a960, #6de0f5) 0 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #6de0f5) 100% 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #6de0f5) 0 100%/100% 1px no-repeat; */
}
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-270x180-LonelyBloom-plain.jpg"></div>
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-90x180-LonelyBloom-plain.jpg"></div>
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-250x100-LonelyBloom-plain.jpg"></div>

Попробуйте сравнить параметры градиентов для разных сторон, по очереди раскомментировать/закомментировать свойство background и всё станет понятно.


Для нескольких разрывов, кроме позиций и размеров, нужно настроить сами градиенты:

div.img-inner-border { position: relative; display: inline-block; }

div.img-inner-border::before {
  content: '';
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 19px;
  
  /* Разрывы со всех сторон (уголки) */
  background: 
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 100%/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 100%/1px 100% no-repeat;
    
  /* Разрывы на углах
  background: 
    linear-gradient(0deg, transparent 10px, #6de0f5 10px, #d8a960, #6de0f5 calc(100% - 10px), transparent calc(100% - 10px)) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, transparent 10px, #6de0f5 10px, #6de0f5 calc(100% - 10px), transparent calc(100% - 10px)) 100% 0/100% 1px no-repeat,
    linear-gradient(0deg, transparent 10px, #6de0f5 10px, #d8a960, #6de0f5 calc(100% - 10px), transparent calc(100% - 10px)) 0 0/1px 100% no-repeat,
    linear-gradient(90deg, transparent 10px, #6de0f5 10px, #6de0f5 calc(100% - 10px), transparent calc(100% - 10px)) 0 100%/100% 1px no-repeat; */
    
  /* Разрывы-змейки
  background: 
    linear-gradient(0deg, #d8a960, #6de0f5) 0 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, transparent 95%) 100% 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #d8a960) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, transparent 5%, #6de0f5) 0 100%/100% 1px no-repeat; */
}
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-270x180-LonelyBloom-plain.jpg"></div>
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-90x180-LonelyBloom-plain.jpg"></div>
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-250x100-LonelyBloom-plain.jpg"></div>


Если в дополнение использовать радиальные градиенты, то можно ещё разнообразить дизайн:

div.img-inner-border { position: relative; display: inline-block; }

div.img-inner-border::before {
  content: '';
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 19px;
  
  /* "Марка" */
  background: 
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 100%/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 0/100% 1px no-repeat,
    linear-gradient(0deg, #6de0f5, #b6ac85 35%, transparent 35%, transparent 65%, #b6ac85 65%, #6de0f5) 0 100%/1px 100% no-repeat,
    
    radial-gradient(circle closest-corner at 50% 0%, transparent calc(30% - 1px), #b6ac85 30%, transparent calc(30% + 1px)),
    radial-gradient(circle closest-corner at 100% 50%, transparent calc(30% - 1px), #b6ac85 30%, transparent calc(30% + 1px)),
    radial-gradient(circle closest-corner at 50% 100%, transparent calc(30% - 1px), #b6ac85 30%, transparent calc(30% + 1px)),
    radial-gradient(circle closest-corner at 0% 50%, transparent calc(30% - 1px), #b6ac85 30%, transparent calc(30% + 1px));
    
  /* "Багет"
  background: 
    linear-gradient(0deg, transparent 20px, #6de0f5 20px, #d8a960, #6de0f5 calc(100% - 20px), transparent calc(100% - 20px)) 100% 0/1px 100% no-repeat,
    linear-gradient(90deg, transparent 20px, #6de0f5 20px, #6de0f5 calc(100% - 20px), transparent calc(100% - 20px)) 100% 0/100% 1px no-repeat,
    linear-gradient(0deg, transparent 20px, #6de0f5 20px, #d8a960, #6de0f5 calc(100% - 20px), transparent calc(100% - 20px)) 0 0/1px 100% no-repeat,
    linear-gradient(90deg, transparent 20px, #6de0f5 20px, #6de0f5 calc(100% - 20px), transparent calc(100% - 20px)) 0 100%/100% 1px no-repeat,
    
    radial-gradient(circle at 0% 0%, transparent 19px, #6de0f5 20px, #6de0f5 20px, transparent 21px),
    radial-gradient(circle at 100% 0%, transparent 19px, #6de0f5 20px, #6de0f5 20px, transparent 21px),
    radial-gradient(circle at 100% 100%, transparent 19px, #6de0f5 20px, #6de0f5 20px, transparent 21px),
    radial-gradient(circle at 0% 100%, transparent 19px, #6de0f5 20px, #6de0f5 20px, transparent 21px); */
}
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-270x180-LonelyBloom-plain.jpg"></div>
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-90x180-LonelyBloom-plain.jpg"></div>
<div class="img-inner-border"><img src="http://img.dummy-image-generator.com/nature/dummy-250x100-LonelyBloom-plain.jpg"></div>

5
  • Очень круто, но не совсем понятно как работает! А если разрыв вверху нужен или сбоку, что поменять? 11 мар 2020 в 10:46
  • 1
    @user3178479: Дополнил.
    – UModeL
    11 мар 2020 в 15:25
  • 1
    @user3178479: Завтра загляните снова - дополню ещё примерами.
    – UModeL
    11 мар 2020 в 16:01
  • Загляну обязательно!!! Еще и примеры для круга можно и тоже с разрывами! Я конкурс завтра назначу, хотелось бы отблагодарить Вас! 11 мар 2020 в 16:17
  • @user3178479: Возможно, что заинтересует реализация круга с разрывами - ru.stackoverflow.com/a/943867/265406
    – UModeL
    11 мар 2020 в 16:57
8

Как пример:

body:before,
body:after {
  z-index: -1;
  content: "";
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  bottom: 0;
}

body:before {
  left: 0;
  background-color: white;
}

body:after {
  right: 0;
  background-color: wheat;
}

.img {
  position: relative;
  overflow: hidden;
  margin: 20px auto;
  width: 330px;
  height: 230px;
}

.img img {
  width: 330px;
  height: 230px;
}

.box {
  display: block;
  position: absolute;
  top: 15px;
  left: 15px;
  width: 300px;
  height: 200px;
  border: 1px solid;
  border-image-slice: 5;
  border-image-source: linear-gradient(90deg, blue 20%, gold 55%);
  border-bottom: none;
}

.box__bottom {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.box__bottom {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.box__bottom:before,
.box__bottom:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  height: 1px;
  width: 50%;
}

.box__bottom:before {
  left: 0;
  margin-left: -60px;
  border: 1px solid;
  border-image-slice: 5;
  border-image-source: linear-gradient(90deg, blue 45%, gold 95%);
  border-top: none;
}

.box__bottom:after {
  right: 0;
  margin-right: -60px;
  border: 1px solid;
  border-image-slice: 5;
  border-image-source: linear-gradient(-90deg, gold 25%, blue 95%);
  border-top: none;
}

.bottom {
  display: block;
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 25px;
}
<div class="img"><img src="https://bookmp3.ru/upload/thumb/zapovednik-sergeya-dovlatova-.jpg">
  <div class="box">
    <div class="box__bottom">
      <div class="bottom"></div>
    </div>
  </div>
</div>

0

Ваш ответ

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

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