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).

(您可以path在MDN上找到有关MDN的更多信息)

结果

然后你可以使用<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>

进一步阅读:

• 在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,因此可能需要对某些值进行调整.