Как повторить форму 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, так что да, вам нужно использовать 'background-image' – Liam

Используйте фоновое изображение в CSS-

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

А затем установить его повторить только горизонтально-

background-repeat:repeat-x;

Это означает, что да, вы должны использовать изображение на заднем плане.

Вы могли бы использовать элемент с помощью jQuery или что-то в этом роде, но я не думаю, что он того стоит.

источник

2013-06-21 09:26:06

спасибо за вклад о jquery! – Lena

@ Lena - Использование JQuery для этого - плохая идея (и, как сказал харли, не стоит). Вы должны использовать CSS для этого. – webnoob

Я не буду использовать jquery.Мне было просто любопытно, что теоретически возможно. Он отлично работает с background-image: repeat. – 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 суетился о SEO на этих изображениях. Имея это в виду, просто используйте 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().

Вы можете увидеть demo here в Firefox.

Однако это свойство работает только в Mozilla с префиксом -moz-, но были попытки работать в браузерах webkit. Поэтому, надеюсь, это может быть реализовано в будущем с более широкой поддержкой браузера.

источник

2013-06-21 11:18:13 otinanai

Спасибо, я обязательно посмотрю на это! – Lena

Как повторить форму CSS по горизонтали?

ответ

Смежные вопросы