CSS 中的装饰艺术风格边框

Question

我希望使用纯 CSS 来实现这种边框效果：

我的偏好是在不添加额外 div 元素的情况下实现它。任何建议将不胜感激

编辑：固定图像描述

Answer 1

试试这个：

body {
  margin:0;
  padding:0;
}

.artdeco {
   position: relative;
   margin:20px;
   padding:20px;
   border:2px solid black;
   min-height:300px;
}

.artdeco:before {
   content:'';
   position: absolute;
   top:-20px;
   bottom:-20px;
   left:10px;
   right:10px;
   border-left: 2px solid black;
   border-right: 2px solid black;
}

.artdeco:after {
   content:'';
   position: absolute;
   top:10px;
   bottom:10px;
   left:-20px;
   right:-20px;
   border-top: 2px solid black;
   border-bottom: 2px solid black;
}

<div class="artdeco"></div>

使用伪元素添加可以应用额外边框的更多矩形。

Answer 2

你可以像下面这样做：

.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;   /* color */
  --b:2px;   /* thickness of lines */
  --o1:15px; /* offest of lines*/
  --o2:10px; /* offset of rectangle */
  
  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>