自定义 CSS 网格边框使用图像

Question

我正在为一个使用 nextjs 的客户开发一个项目，设计要求我在响应式 CSS 网格上有一个带有自定义边框的组件。我已经制作了包含所有内容的 CSS 网格，但是我在添加设计要求的边框时遇到了很多麻烦。

到目前为止，我已经尝试将边框作为背景的一部分，但是当我在设备之间移动时会变得很奇怪，我也尝试过使用

aftter

伪元素，但我没有得到任何结果。

我需要 CSS 网格上的边框看起来像下图：

有人可以帮我解决这个问题吗？非常感谢您的帮助。

Answer 1

您可以使用 border-image 属性更快地实现它。取一个square image shape并放入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>