有没有一种方法可以构造一个三边形边框，其中间和最里面的边界线仅跨越四个角中的两个角？

Question

我要创建以下边框。

在外部-实心白色边框，通过边框半径带有圆角。 在中间-仅拐角纯白色边框，只有在边框的左上角和右下角可见圆角。 在最里面-仅拐角的纯白色边框，其圆角适合中间边框的最大长度，仅在边框的左上角和右下角可见。

我尝试将其应用于ccs之前和之后的单个边框，这使我可以轻松地创建多达三行，但是我无法根据需要对内部和中间的行进行样式设置。

代码的当前状态：

.corner-adored-white-border {
    position: relative;
    border: 1px solid white;
    padding: 10px;
    border-radius: 9px;
    margin: 10px;
}

.corner-adored-white-border:before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    right: 2px;
    border: 1px solid white;
    border-radius: 8px;
}

.corner-adored-white-border:after {
    content: "";
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border: 1px solid white;
    border-radius: 8px;
}

如您所见，当前结果并没有给我想要的内线和中线边框。

Answer 1

这是一个带有伪元素和阴影的想法

.box {
  width:250px;
  height:100px;
  border:2px solid;
  border-radius:10px;
  position:relative;
  z-index:0;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  z-index:-1;
  width:30px;
  height:30px;
  border:2px solid;
}
.box:before {
 top:5px;
 left:5px;
 border-right:0;
 border-bottom:0;
 border-top-left-radius:10px;
 box-shadow: 
  5px 5px 0 inset #fff, 
  7px 7px 0 inset #000;
}
.box:after {
 bottom:5px;
 right:5px;
 border-left:0;
 border-top:0;
 border-bottom-right-radius:10px;
 box-shadow: 
  -5px -5px 0 inset #fff, 
  -7px -7px 0 inset #000;
}

<div class="box">

</div>