CSS容器包裹形多边形

Question

如何使用CSS / CSS3构建白色/绿色容器（形状多边形）？

Answer 1

您可以使用基本SVG路径

http://codepen.io/anon/pen/XbaKLp

<svg width="300px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M5 5 L170 3 L295 15 L280 95 L130 80 L110 95 L20 85" stroke="transparent" fill="#8eab32"></path>
</svg>

• Mx y代表第一个坐标;
• Lx y表示从先前坐标到(x, y)的直线。

（您可以在MDN）

上找到有关path的更多信息

结果

然后，您可以使用<foreignObject>...</foreignObject>元素在SVG中添加文本或标记，例如假设我们需要插入一个链接

<svg width="300px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="..."></path>

    <foreignObject width="100%" height="100%">
       <a href="#">noch 356 tage</a>    
    </foreignObject>
</svg>

以及一些基本的CSS

svg {
  line-height: 100px;
  text-align: center;
}

svg a {
  color: #fff;
  font: 36px "Indie Flower";
  text-decoration: none;
}

最终结果为http://codepen.io/anon/pen/QbMEeW

您甚至可以对CSS元素本身应用一些SVG转换，例如

svg {
  transform: scale(.6) rotateZ(-2deg);
}

所以它看起来像你的例子。

Answer 2

您可以使用剪辑路径:(虽然我必须承认，浏览器支持并不令人难以置信）：

body {
  height: 100%;
  background: #222;
}
div {
  height: 100px;
  width: 200px;
  line-height: 100px;
  text-align: center;
  background: rgb(180, 255, 50);
  -webkit-clip-path: polygon(0 5%, 60% 0, 100% 20%, 98% 100%, 50% 85%, 40% 100%, 5% 90%);
}

<div>This is clipped</div>

进一步阅读：

• clip path on css-tricks
• canIuse查看浏览器支持

SVG方法

你也可以使用SVG创建这样的形状：

html,
body {
  background: gray;
}

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="400px" height="200px" viewBox="0 0 100 100">
  <g fill="green" stroke="black">
    <path d="M 0 5, 60 0, 100 20, 98 100, 50 85, 40 100, 5 90z" />
  </g>
</svg>

免责声明

请注意我自己仍在学习SVG，因此可能需要对某些值进行调整。