БЛОГ НА HUSL


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

Автор вопроса: user3178479

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

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


Источник

Ответы (2 шт):

Автор решения: Sevastopol'

Как пример:

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>

→ Ссылка
Автор решения: UModeL

Эх... Если бы <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="https://picsum.photos/id/1082/300/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1022/100/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1019/250/100"></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="https://picsum.photos/id/1082/300/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1022/100/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1019/250/100"></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="https://picsum.photos/id/1082/300/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1022/100/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1019/250/100"></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="https://picsum.photos/id/1082/300/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1022/100/200"></div>
<div class="img-inner-border"><img src="https://picsum.photos/id/1019/250/100"></div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.