css - 我应该为这个背景图像使用 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

我试了一下。它在 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;
}

小提琴

参考

Answer 2

我认为这不是transform这项工作的正确工具；浏览器要做很多工作来渲染这样的形状。

替代方案我建议考虑：

1. linear-gradient.

   CSS Gradients 可以做的不仅仅是从一种颜色缓动到另一种颜色。你可以用它们画出各种图案。这是一个页面，其中包含您可能想要查看的一些示例。它们都不是你正在寻找的东西，但它们确实展示了你可以用渐变做的一些你可能不喜欢的事情。

2. SVG。

   使用 SVG 图像作为背景可以让您完全灵活地选择它的外观。基本上它是一个图像；它可以是任何东西。但是像这样的图像的 SVG 在文件大小方面应该是相当轻量级的，您可以将它作为数据 URL 直接包含在 CSS 代码中。快捷方便。