Должен ли я использовать css для этого фонового изображения?

Question

Я пытаюсь выяснить, возможно ли повторить этот фон с помощью CSS.

Я думал об использовании перекоса (подобный пример ниже), но не имея много удачи до сих пор.

http://jsfiddle.net/EA3RY/

#chevron { 
position: relative; 
text-align: center; 
padding: 12px; 
margin-bottom: 6px; 
height: 60px; 
width: 200px; 
} 

#chevron:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 51%; 
    background: #ccc; 
    -webkit-transform: skew(0deg, 6deg); 
    -moz-transform: skew(0deg, 6deg); 
    -ms-transform: skew(0deg, 6deg); 
    -o-transform: skew(0deg, 6deg); 
    transform: skew(0deg, 6deg); 
} 
#chevron:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    height: 100%; 
    width: 50%; 
    background: #ccc; 
    -webkit-transform: skew(0deg, -6deg); 
    -moz-transform: skew(0deg, -6deg); 
    -ms-transform: skew(0deg, -6deg); 
    -o-transform: skew(0deg, -6deg); 
    transform: skew(0deg, -6deg); 
} 

Я думаю, мой вопрос # 1 это возможно? и # 2 - хорошая практика использовать CSS в этой ситуации? Возможно, мне просто лучше использовать фоновое изображение.

Answer 1

Я не думаю, что transform является правильным инструментом для этой работы; для браузера очень много работы, чтобы сделать такую ​​фигуру.

Alternative я предлагаю задуматься:

1. linear-gradient.

   CSS Градиенты могут делать намного больше, чем просто ослабление от одного цвета к другому. Вы можете рисовать с ними всевозможные шаблоны. Here's a page with some examples you might want to look at. Ни один из них не является именно тем, что вы ищете, но они демонстрируют некоторые из вещей, которые вы можете сделать с градиентами, которые вы, возможно, не оценили.

2. SVG.

   Использование изображения SVG для вашего фона дает вам полную гибкость в отношении того, как он выглядит. В основном это образ; это может быть что угодно. Но SVG для такого изображения должен быть довольно легким с точки зрения размера файла, и вы можете включить его непосредственно в код CSS в качестве URL-адреса данных. Быстро и просто.

Answer 2

Я дал ему шанс. Он отлично выглядит на Chrome и IE, но не в Firefox. Проблема в том, что любой контент, который вы размещаете в верхней и нижней частях, будет отображаться в том же месте, что и в середине.

<div class="fancy-up"></div> 
<div class="fancy">content in here!</div> 
<div class="fancy-down"></div> 

с

.fancy { 
    background-color: #FFA500; 
    height: 100px; 
    width: 500px; 
} 
.fancy-up { 
    border-right: 500px solid #FFA500; 
    border-top: 30px solid rgba(0, 0, 0, 0); 
    height: 0; 
    width: 0; 
} 
.fancy-down { 
    border-bottom: 30px solid rgba(0, 0, 0, 0); 
    border-right: 500px solid #FFA500; 
    height: 0; 
    width: 0; 
} 

Fiddle

Reference