我应该使用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不适合这项工作;浏览器只需渲染这样的形状就可以做很多工作。

备选方案我建议考虑：

1. linear-gradient。

   CSS Gradients可以做的不仅仅是从一种颜色缓和到另一种颜色。你可以用它们绘制各种图案。 Here's a page with some examples you might want to look at。它们都不是你想要的，但它们确实展示了你可以用渐变做的一些你可能不会欣赏的东西。

2. SVG。

   使用SVG图像作为背景，可以让您完全灵活地看待它的外观。基本上它是一个图像;它可以是任何东西。但是对于像这样的图像的SVG在文件大小方面应该非常轻量级，并且可以将其作为数据URL直接包含在CSS代码中。快速简便。

Answer 2

我试了一下。它在Chrome和IE上看起来很好，但在Firefox中却看不到。问题是你放在顶部和底部的任何内容都会出现在与中间相同的位置。

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

C

.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