没有图像的CSS3多边形,怎么样？

Question

我正在建立一个类似这样的网站

顶部静态和底部四个的两个结构是动态的,当我说动态时,我的意思是可扩展,类似这样

由于这些只是颜色,形状和阴影,我相信可以使用CSS3来创建它们.但是我很难这样做.我甚至试过使用CSSHat,但结果很糟糕.

这是示例形状

这是生成的代码:

width: 1920px;
height: 341px;
-moz-border-radius: 0 1920px 1920px / 0 181px 56px;
-webkit-border-radius: 0 1920px 1920px / 0 181px 56px;
border-radius: 0 1920px 1920px / 0 181px 56px; /* border radius */
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box; /* prevents bg color from leaking outside the border */
background-color: #3b0f1d; /* layer fill content */

结果如下: 可以在http://codepen.io/seraphzz/pen/mgDwd找到一个实例

哪个是实现这一目标的最佳方式？

Answer 1

您可以使用CSS 转换（在/ elements上:before:after）来模拟效果。

类似的东西（演示位于http://codepen.io/gpetrioli/pen/LHbIE）

<div class="background">
    <div class="shape"></div>
</div>

和

background{background-color: #3c101d}
.shape{
  width: 800px;
  height: 341px;
  background: white;
  display: block;
  margin:10px;
  position:relative;
  overflow:hidden;
}
.shape:before{
  content:'';
  width:110%;
  height:30px;
  background:#3c101d;
  position:absolute;
  height:100px;
  top:0;
  left:0;
  transform-origin:0 100%;
  transform: translateY(-100px) rotate(5deg);
}
.shape:after{
  content:'';
  width:110%;
  height:30px;
  background:#3c101d;
  position:absolute;
  height:100px;
  bottom:0;
  left:0;
  transform-origin:0 0;
  transform: translateY(100px) rotate(-2deg);
}

注意：此代码使用标准 CSS 属性。根据需要添加供应商前缀