邊框圖像重復不起作用

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

您正在使用快捷方式“邊框圖像”屬性。 這里的stretch對應於border-image-repeat屬性。 將其設置為“重復”，而不是拉伸。

此外，您以錯誤的方式使用了屬性“ border-image-slice”。 這是一個很好的解釋在這里 。

您通常可以在此處找到有關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;