如何水平重複CSS形狀？

我想用一個重複的三角形來裝飾我的頁面底部。圖片顯示了一個三角形，但我想填充整個水平div。如何水平重複CSS形狀？

截圖什麼的，我這麼遠：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作爲背景？

謝謝你的幫助。

來源

2013-06-21 Lena

你不能使用CSS將圖像添加到標記，所以是的，你需要使用'背景圖像' – Liam

在CSS-使用背景圖片

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

然後將其設置爲只重複horizontally-

background-repeat:repeat-x;

這意味着，是的，你必須使用背景圖。

你可能clone元素使用jQuery或其他東西，但我不認爲這是值得的。

來源

2013-06-21 09:26:06

感謝關於jQuery的輸入！ – Lena

@Lena - 對此使用JQuery是一個壞主意（正如哈利所說的，不值得）。你應該爲此使用CSS。 – webnoob

我不打算使用jquery。我只是好奇什麼是理論上可能的。它適用於背景圖片：重複。 – Lena

使用img作爲背景並讓其重複。我不得不說，我更喜歡背景圖片而不是html代碼中的圖片。這是導致人們不能在HTML代碼

來源

2013-06-21 09:15:35

你的意思是我應該將三角形保存爲.png而不是CSS？這是我唯一的選擇嗎？ – Lena

不，他意味着您需要將其設置爲背景圖像。圖像的格式是不相關的。 – Liam

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

來源

2013-06-21 09:18:26 Aravind30790

我的意見是使用背景圖片在CSS，如果他們不被用作鏈接等，基本上，如果你不是活得輕鬆地複製它們作爲圖像t在這些圖像上搜索引擎優化。考慮到這一點，只需爲圖片使用一些CSS。

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

正如前面提到的，你可以在技術上使用JQuery的克隆方法。這是一個壞主意。爲什麼在CSS處理它時爲頁面添加額外的東西。

來源

2013-06-21 09:24:58 webnoob

我只是想知道什麼是可能的。確定這個項目沒有意義，但現在我可以將jquery選項留在我的腦海中。 ;-) – Lena

@Lena - 明白。我們得到很多人在這裏只是要求一個解決方案，不管這是一個好主意，所以我寧願澄清它:) – webnoob

如果你想實驗，有一個CSS屬性，可以讓你使用一個元素（在這種情況下是你的三角形div）作爲背景圖片。此屬性是background:element()。

您可以在Firefox中看到demo here。

但是，該屬性僅適用於Mozilla中的-moz-前綴，但也有人嘗試在webkit瀏覽器中工作。所以，希望這可以通過更廣泛的瀏覽器支持在未來實現。

來源

2013-06-21 11:18:13 otinanai

謝謝，我會毫不猶豫地研究這個！ – Lena

如何水平重複CSS形狀？

回答

相關問題