Сделать блок шевронным наконечником в CSS

Question

Возможно ли сделать фигуру, подобную той, что изображена ниже в чистом CSS? Как я мог это сделать?

Я хотел бы, чтобы горизонтальный сплошной блок на сплошном фоне, с шевром на одном конце, отделенным от основного блока.

Answer 1

Вы можете, вам нужно будет построить его из нескольких различных форм. Вы хотите, чтобы эти формы в таком порядке:

1. Черный прямоугольник
2. Черный треугольник с фиолетовым фоном
3. фиолетовый треугольник с черным фоном
4. Черный треугольник с фиолетовым фоном

Have A посмотрите на то, как создавать фигуры на http://css-tricks.com/examples/ShapesOfCSS/. Сделайте снимок и вернитесь с помощью CSS/Markup, если вы застряли.

Что-то утомительное: вам, вероятно, понадобится использовать float:left;, чтобы формы сидели рядом друг с другом без пробелов между ними.

Answer 2

Вы можете сделать это с помощью нескольких фоновых градиентов:

div { 
    width: 300px; 
    height: 50px; 
    background-color: black; 
    background-image: 
     linear-gradient(-45deg, white 25px, transparent 25px), 
     linear-gradient(-135deg, white 25px, transparent 25px), 
     linear-gradient(-45deg, black 40px, transparent 40px), 
     linear-gradient(-135deg, black 40px, transparent 40px), 
     linear-gradient(-45deg, white 50px, transparent 50px), 
     linear-gradient(-135deg, white 50px, transparent 50px); 
} 

Fiddle: http://jsfiddle.net/jonathansampson/fxj3u/

Код выше, не имеет какого-либо из необходимых префиксов поставщика для linear-gradient. Чтобы использовать его в своем проекте, вам нужно либо предоставить все префиксы, либо просто обратиться к инструменту, например, -prefix-free (это то, что я использую).