Граница в стиле ар-деко в CSS

Question

Я хочу добиться этого эффекта границы с помощью чистого CSS:

Я бы предпочел добиться этого без добавления дополнительных элементов div.

_{Свободный перевод вопроса Art Deco style border in CSS от участника @Alex.}

Answer 1

Вы можете сделать это, как показано ниже:

.box {
  width:150px;
  height:200px;
  border:15px solid transparent; /* control the offset of the lines */
  outline:2px solid #000; /* adjust the 2px here */
  outline-offset:-10px; /* control the offset of the rectangle */
  background:
    linear-gradient(#000 0 0) top,
    linear-gradient(#000 0 0) left,
    linear-gradient(#000 0 0) bottom,
    linear-gradient(#000 0 0) right;
  background-size:200% 2px,2px 200%; /* adjust the 2px here */
  background-origin:padding-box;
  background-repeat:no-repeat;
}

<div class="box"></div>

С переменными CSS для легкого управления:

.box {
  --c:red;   /* Цвет */
  --b:2px;   /* толщина линий */
  --o1:15px; /* смещение линий*/
  --o2:10px; /* смещение прямоугольника */
  
  width:150px;
  height:200px;
  box-sizing:border-box;
  display:inline-block;
  border:var(--o1) solid transparent; 
  outline:var(--b) solid var(--c); 
  outline-offset:calc(-1*var(--o2));
  background:
    linear-gradient(var(--c) 0 0) top,
    linear-gradient(var(--c) 0 0) left,
    linear-gradient(var(--c) 0 0) bottom,
    linear-gradient(var(--c) 0 0) right;
  background-size:200% var(--b),var(--b) 200%; 
  background-origin:padding-box;
  background-repeat:no-repeat;
}

<div class="box"></div>
<div class="box" style="--c:green;--b:1px;--o1:20px;"></div>
<div class="box" style="--c:blue;--b:4px;--o1:40px;--o2:20px;"></div>
<div class="box" style="--c:#000;--b:1px;--o1:10px;--o2:0;"></div>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

Вариант с помощью псевдоэлементов :before и :after

div {
  position: relative; box-sizing: border-box; margin: 20px; width: 150px; height: 200px;
  border: 1px solid black;
  text-align: center; padding: 60px 20px; font-family: monospace; font-size: 12px;
}

div:before {
  content: ""; display: block; position: absolute; box-sizing: border-box;
  top: 5px; left: -10px;
  width: calc(100% + 20px); height: calc(100% - 10px);
  border-top: 1px solid black; border-bottom: 1px solid black;
}

div:after {
  content: "";  display: block; position: absolute; box-sizing: border-box;
  top: -10px; left: 5px;
  width: calc(100% - 10px); height: calc(100% + 20px);
  border-left: 1px solid black; border-right: 1px solid black;
}

<div>Граница в стиле ар-деко в CSS<br><br>с помощью псевдоэлементов :before и :after</div>

Вариант с добавлением самой простой анимацией при наведении. Анимация же, как мы знаем, может быть разнообразной.

div {
  position: relative; box-sizing: border-box; margin: 20px; width: 150px; height: 200px;
  border: 1px solid black;
  text-align: center; padding: 60px 20px; font-family: monospace; font-size: 12px;
}

div:before {
  content: ""; display: block; position: absolute; box-sizing: border-box;
  top: 5px; left: 50%;
  width: 0; height: calc(100% - 10px);
  border-top: 1px solid black; border-bottom: 1px solid black;
  transition: all 01s;
}

div:after {
  content: "";  display: block; position: absolute; box-sizing: border-box;
  top: 50%; left: 5px;
  width: calc(100% - 10px); height: 0;
  border-left: 1px solid black; border-right: 1px solid black;
  transition: all 01s;
}

div:hover:before {left: -10px; width: calc(100% + 20px);}
div:hover:after {top: -10px; height: calc(100% + 20px);}

<div>Граница в стиле ар-деко в CSS<br><br>с помощью псевдоэлементов :before и :after</div>

Answer 3

Вариант с помощью border-image:

div {
  border: 15px double #000;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' stroke='%23000' stroke-width='2'%3E%3Cline x1='0' y1='10' x2='40' y2='10'/%3E%3Cline x1='0' y1='30' x2='40' y2='30'/%3E%3Cline x1='10' y1='0' x2='10' y2='40'/%3E%3Cline x1='30' y1='0' x2='30' y2='40'/%3E%3Crect x='5' y='5' width='30' height='30' fill='none'/%3E%3C/svg%3E") 15;
  padding: 20px;
  width: 150px;
  height: 200px;
  text-align: center;
}

<div>Граница в стиле ар-деко в CSS<br><br>с помощью <tt>border-image</tt></div>

БЛОГ НА HUSL

Граница в стиле ар-деко в CSS

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