Question

我想用重复的三角形装饰页面的底部。图片显示了一个三角形，但我想填充整个水平div。

到目前为止我所获得的截图：http://i.stack.imgur.com/JJA6D.png

<div class="container triangle"> </div>

.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}

这是可能的还是我必须使用img作为背景？

感谢您的帮助。

Answer 1

在CSS中使用背景图片 -

background:url("http://site.com/img/whatever.svg");

然后将其设置为仅水平重复 -

background-repeat:repeat-x;

这意味着是的，你必须使用背景图像。

你可以clone使用jQuery或其他东西，但我不认为这是值得的。

Answer 2

background-image:url('your image url');
background-repeat:repeat-x;

Answer 3

我的意见是在CSS中使用背景图像，如果它们不被用作链接等。基本上，如果你不喜欢这些图像上的搜索引擎优化。考虑到这一点，只需为您的图像使用一些CSS。

background-image: url("yoururl/image.jpg") repeat-x;

正如已经提到的，你可以在技术上使用JQuery的克隆方法。这是一个坏主意。为什么在CSS处理它时为页面添加额外的东西。

Answer 4

如果您想进行实验，可以使用CSS属性，使您能够使用元素（在本例中为三角形div）作为背景图像。此属性为background:element()。

您可以在Firefox中看到demo here。

但是，此属性仅适用于具有-moz-前缀的Mozilla，但也尝试在webkit浏览器中工作。所以，希望这可以在未来更广泛的浏览器支持下实现。

Answer 5

使用img作为背景并让它重复。我不得不说我更喜欢背景图片而不是html代码中的图片。这是因为人们无法像html代码中的图像那样轻松复制它们

如何水平重复CSS形状？

5 个答案: