边框图像重复不起作用

Question

我想用重复的三角形图像制作顶部和底部边框。但无法实现这一结果。我得到一个三角形。 如何在图片中获得重复的三角形？

我的CSS：

border-style: solid;
border-width: 5px 5px 18px 20px;
border-image: url('../../img/triangle.png') 0 0 18 20 fill stretch;

Answer 1

您正在使用快捷方式“border-image”属性。此处的stretch对应于border-image-repeat属性。将其设置为“重复”而不是拉伸。

此外，您正在以错误的方式使用属性“border-image-slice”。有一个很好的解释here。

您可以在here找到有关border-image属性的更多信息。

我建议您在第一次使用属性时使用详细版本：

.banner{
    width:600px;
    height: 200px;
    border-style: solid;
    border-width: 20px 0px 20px 0px;
    border-image-source: url('https://whatsarahread.com/wp-content/uploads/sites/113/2015/02/triangle-border.png');
    border-image-slice: 100% 0%;
    border-image-repeat: repeat;
}

<div class="banner"></div>

Answer 2

使用“重复”而不是按照Driblou定义的拉伸。

    border-image: url('../../img/triangle.png') 0 0 18 20 fill repeat;