CSS 容器包裹形状的多边形

Question

如何使用 CSS / CSS3 构建 white/green 容器（形状多边形）？

Answer 1

您可以为此使用剪辑路径：（尽管我不得不承认，浏览器支持并不令人难以置信）：

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，因此可能需要对值进行一些调整。

Answer 2

您可以使用基本的 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 中添加文本或标记，例如假设我们需要插入一个 link

<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

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

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

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

CSS 容器包裹形状的多边形

CSS Container Wrap shaped Polygons

css

polygon

css-shapes

SVG 方法