您可以使用border-image property更快地实现它。取一个正方形图像形状并放入div的边框中。上面的链接有一个相关的例子。你看看吧。

或

你可以尝试这个不需要图像：-

.container{
   display: flex;
}

.container > .box{
   padding: 2rem 1rem;
   border: 1px solid black;
   position: relative;
}

.container > .box:nth-child(odd):before,
.container > .box:after
{
   content: '';
   display: block;
   width: 10px;
   height: 10px;
   border: 1px solid black;
   background-color: pink;
   position: absolute;
   z-index: 1;
}

.container > .box:before{
   top: -5px;
   left: -5px;
}

.container > .box:after{
   top: -5px;
   right: -5px;
}

.container > .box:nth-child(odd) > span:before,
.container > .box > span:after
{
content: '';
   display: block;
   width: 10px;
   height: 10px;
   border: 1px solid black;
   background-color: pink;
   position: absolute;
   z-index: 1;
}

.container > .box > span:before{
   bottom: -5px;
   left: -5px;
}

.container > .box > span:after{
   bottom: -5px;
   right: -5px;
}

<div class="container">
  <div class="box">
     <span>Lorem Ipsum</span>
  </div>
  <div class="box">
     <span>Ipsum Lorem</span>
  </div>
</div>

如果不需要透明度，您可以尝试使用渐变与border-image相结合

.box {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  height: 300px;
  margin: 30px;
  /* simulate the border using a grid made with conic-gradient*/
  background: 
   conic-gradient(from 90deg at 1px 1px,#0000 25%,#7a97fb 0)
   0 0/calc((100% - 1px)/3) calc((100% - 1px)/2)
}
.box div {
  position: relative;
}
.box div:before,
.box div:after {
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* create 4 squares on the corners with 14px size */
  border-image: 
   linear-gradient(#7a97fb 0 0) 50%/
    14px/7px; /* width / (width/2) */
}
.box div:after {
  /* create 4 squares on the corners above the previous ones with 12px size
     leaving 1px on each side for the border you need 
  */
  border-image: 
   /* the color here must match the background color */
   linear-gradient(#ebf0f3 0 0) 50%/
    12px/6px; 
}


body {
 background: #ebf0f3;
}

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