如何水平重复 CSS 形状？答案

【问题标题】：How to repeat a CSS shape horizontally?如何水平重复 CSS 形状？
【发布时间】：2013-06-21 09:13:14
【问题描述】：

我想用一个重复的三角形来装饰我的页面底部。图片显示一个三角形，但我想填充整个水平 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 作为背景？

感谢您的帮助。

【问题讨论】：

您不能使用 CSS 将图像添加到标记中，所以是的，您需要使用 background-image

标签： html css repeat css-shapes

【解决方案1】：

在你的 CSS 中使用背景图片-

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

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

background-repeat:repeat-x;

这意味着是的，您必须使用背景图片。

你可以 clone 使用 jQuery 之类的元素，但我认为这不值得。

【讨论】：

@Lena - 为此使用 JQuery 是个坏主意（正如 harley 所说，不值得）。您应该为此使用 CSS。
我不会使用 jquery。我只是好奇理论上什么是可能的。它适用于背景图像：重复。

【解决方案2】：

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

【讨论】：

【解决方案3】：

我的意见是在 CSS 中使用背景图像，如果它们不被用作链接等。基本上，如果你不关心这些图像的 SEO。考虑到这一点，只需为您的图像使用一些 CSS。

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

如前所述，您可以在技术上使用 JQuery 的克隆方法。这是一个坏主意。为什么要在 CSS 处理页面时为页面添加额外的操作。

【讨论】：

我只是想知道什么是可能的。当然这对这个项目没有意义，但现在我可以将 jquery 选项留在脑海中。 ;-)
@Lena - 明白了。我们有很多人在这里寻求解决方案，无论这是否是一个好主意，所以我更愿意澄清它:)

【解决方案4】：

如果您想尝试一下，有一个 CSS 属性可以让您使用元素（在本例中为三角形 div）作为背景图像。这个属性是background:element()。

您可以在 Firefox 中看到demo here。

但是，此属性仅适用于带有 -moz- 前缀的 Mozilla，但也有人尝试在 webkit 浏览器中使用。因此，希望将来可以通过更广泛的浏览器支持来实现。

【讨论】：

谢谢，我一定会调查的！

【解决方案5】：

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

【讨论】：

您的意思是我应该将三角形保存为 .png 而不是 CSS？这是我唯一的选择吗？
不，他的意思是您需要将其设置为背景图像。图像的格式无关紧要。