Градиентная граница внутри блока с неоднородным фоном

Question

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

Эта граница внутри блока с фоновой картинкой (неоднородный фон). От краев на 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; не работает.

Можно по аналогии с вот этим сделать: https://ru.stackoverflow.com/a/1061545/178988 — Qwertiy, Mar 11 '20 at 17:15
@Qwertiy, у меня под этим вопросом пропала надпись "назначить конкурс" и не могу ни где найти ее — user3178479, Mar 12 '20 at 10:39
По идее она и не появлялась - вопрос слишком новый. — Qwertiy, Mar 12 '20 at 11:55
@Qwertiy, вчера было написано что смогу начать конкурс завтра, но сегодня вообще не кнопки ннет ничего — user3178479, Mar 12 '20 at 16:04
Попробуй через 2 с половиной часа. — Qwertiy, Mar 12 '20 at 16:28
@Qwertiy, захожу на любые другие вопросы ссылка на "начать конкурс" есть под "добавить комментарий" и только тут нет такого) — user3178479, Mar 12 '20 at 17:31
Ещё 52 минуты подожди. И прочитай уже правила... — Qwertiy, Mar 12 '20 at 18:02

UModeL · Accepted Answer · 2023-05-02T22:36:50.537

Эх... Если бы <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>

Очень круто, но не совсем понятно как работает! А если разрыв вверху нужен или сбоку, что поменять? — user3178479, Mar 11 '20 at 10:46
@user3178479: Завтра загляните снова - дополню ещё примерами. — UModeL, Mar 11 '20 at 16:01
Загляну обязательно!!! Еще и примеры для круга можно и тоже с разрывами! Я конкурс завтра назначу, хотелось бы отблагодарить Вас! — user3178479, Mar 11 '20 at 16:17
@user3178479: Возможно, что заинтересует реализация круга с разрывами - https://ru.stackoverflow.com/a/943867/265406 — UModeL, Mar 11 '20 at 16:57

score 8 · Answer 2 · answered Mar 10 '20 at 19:51

Как пример:

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>

Градиентная граница внутри блока с неоднородным фоном

2 Answers2

Linked

Related