Html 固定中心的CSS边框图像

我想对div border使用类似下图的内容：

我不希望中心被拉伸（对于宽和高div）。在中心保持固定的情况下，我应该如何剪切这张照片

border-style: solid;
border-width: 41px 23px 46px 21px;
-moz-border-image: url(6.png) 41 23 46 21 stretch repeat;
-webkit-border-image: url(6.png) 41 23 46 21 stretch repeat;
-o-border-image: url(6.png) 41 23 46 21 stretch repeat;
border-image: url(6.png) 41 23 46 21 fill stretch repeat;

切割上述图像的顶部中间部分，并使用

背景图像

进行绘制

使用

：before

和

：after

伪元素绘制左/右部分

输出图像：

*{框大小：边框框；}
身体{
背景：线性梯度（紫色、白色）无重复；
最小高度：100vh；
保证金：0；
}
.盒子{
背景图像：url（“https://s30.postimg.org/r1e86dtr5/border_image.png“”，url（“”）https://s30.postimg.org/r1e86dtr5/border_image.png");
背景尺寸：288px 39px；
背景重复：无重复；
背景位置：中上、中下；
填充：40px 20px；
位置：相对位置；
最小宽度：300px；
高度：250px；
宽度：500px；
利润率：20px；
}
.box:之前，
.盒子：之后{
边界半径：10px 0 10px；
边框：纯黑；
边框宽度：2px 0 2px 2px；
宽度：钙（50%-142px）；
位置：绝对位置；
内容：''；
底部：17px；
顶部：19px；
左：0；
}
.盒子：之后{
边界半径：0 10px 10px 0；
边框宽度：2×2×2×0；
左：自动；
右：0；
}

div的背景和周围的元素总是白色的吗？@haxxxton我的坏！我的最后一个问题是关于NaserYousefi的。我删除了css形状标签，因为这不是形状问题。这是一个关于边框图像的问题。我还添加了css形状和边框图像标记，因为OP只在一个特定领域寻找解决方案，而其他一些可能的领域可以提供更好的解决方案。css形状标记用于使用纯css制作的形状。这不是一个可以使用CSS的形状，因此也不会被归类为CSS形状。可能值得一提的是，只有当

.box

元素是透明的，任何

背景色都会破坏设计。使用
width:calc（50%-142px）使盒子响应宽度：在<代码>之前和<代码>之后<代码>风格定义谢谢，穆罕默德·乌斯曼。我认为@haxxxton建议正确地完成了您的回答。请在您的解决方案中添加宽度：calc（50%-142px）以完成此操作。谢谢你，哈克斯顿。@哈克斯顿，我已经做了必要的调整。（谢谢）