寻求简便实现响应式屏幕自适应框架的方案，支持角落连接

我想找更简便的方法实现这个框架，考虑用SVG来让它自适应边距并保持线条宽度。当前实现用多个div拼接角落和线条，最终需求更复杂，框架角落需要实现类似Mockup里的连接效果，目标是做一个响应式框架。

当前实现代码 #

CSS #

.frame {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}
.frame-topleftcorner {
  width: 40px;
  height: 40px;
  margin: 10px;
  position: absolute;
  background-color: #f4e7d7;
}
.frame-toprightcorner {
  right: 0;
  width: 40px;
  height: 40px;
  margin: 10px;
  position: absolute;
  background-color: #f4e7d7;
}
.frame-bottomleftcorner {
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: 10px;
  position: absolute;
  background-color: #f4e7d7;
}
.frame-bottomrightcorner {
  right: 0;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: 10px;
  position: absolute;
  background-color: #f4e7d7;
}
.line-topleft {
  top: 30px;
  left: 50px;
  width: -webkit-calc(43% - 40px);
  height: 2px;
  display: flex;
  position: absolute;
  background: beige;
}
.line-topright {
  top: 30px;
  right: 50px;
  width: -webkit-calc(43% - 40px);
  height: 2px;
  display: flex;
  position: absolute;
  background: beige;
}
.line-bottom {
  left: 0px;
  right: 0px;
  width: -webkit-calc(100% - 100px);
  bottom: 30px;
  height: 2px;
  margin: auto;
  display: flex;
  position: absolute;
  background: beige;
}
.line-right {
  top: 50px;
  right: 30px;
  width: 2px;
  height: -webkit-calc(100% - 100px);
  display: flex;
  position: absolute;
  background: beige;
}
.line-left {
  top: 50px;
  left: 30px;
  width: 2px;
  height: -webkit-calc(100% - 100px);
  display: flex;
  position: absolute;
  background: beige;
}

HTML #

<div class="frame">
  <div class="frame-topleftcorner"></div>
  <div class="frame-toprightcorner"></div>
  <div class="frame-bottomleftcorner"></div>
  <div class="frame-bottomrightcorner"></div>
  <div class="line-topright"></div>
  <div class="line-topleft"></div>
  <div class="line-right"></div>
  <div class="line-left"></div>
  <div class="line-bottom"></div>
</div>

SVG简化实现方案 #

用SVG可以大幅减少代码量，天然支持响应式，还能轻松实现角落连接效果，同时保持线条宽度固定：

HTML（SVG） #

<svg class="svg-frame" viewBox="0 0 100 100" preserveAspectRatio="none">
  <path d="M10,10 L20,10 L20,20 M10,10 L10,20 
           M80,10 L90,10 L90,20 M80,10 L80,20 
           M10,80 L20,80 L20,90 M10,80 L10,90 
           M80,80 L90,80 L90,90 M80,80 L80,90 
           M20,10 L80,10 
           M10,20 L10,80 
           M90,20 L90,80 
           M20,90 L80,90" 
        stroke="#f4e7d7" 
        stroke-width="2" 
        fill="none"/>
</svg>

CSS #

.svg-frame {
  position: absolute;
  width: 100%;
  height: 100%;
}

实现说明 #

• viewBox="0 0 100 100" 定义SVG的坐标系统，让元素能按比例自适应缩放
• preserveAspectRatio="none" 确保SVG铺满容器，不受容器宽高比限制
• 路径指令d直接定义了四个角落的连接样式和四条边框线条，调整数值可修改边距、角落大小
• stroke-width="2" 固定线条宽度，不会随SVG缩放而变化

内容的提问来源于stack exchange，提问作者borjborj