css - 菱形/旋转方形边框

Question

我正在努力弄清楚如何添加像此处图片那样的边框。菱形/方形旋转边框。我试过边框图片，但似乎无法加载它们。

这两个

    border-image: url('path-to-your-png') 33% round;
    /* border-image: url('content/uploads/2018/07/border.png')  33% round;
    border-width: 0 0 20px 0;
    margin-left: 1px; */

还有这个

    border-image-source: url('content/uploads/2018/07/dots.svg');
    border-image-slice: 33% 33% ;
    border-image-repeat round;

没有成功。 (我也删除了链接 url，但我确信我在实际代码中使用的链接是正确的。

Border I'm looking to recreate

Answer 1

CSS border-image 属性可以完成这项工作。

参见文档:https://www.w3schools.com/css/css3_border_images.asp

.border-diamond {
  border: 10px solid transparent;
  border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
}

<div class="border-diamond">
  Content here
</div>