CSS Container Wrap shaped Polygons

Question

How can I build the white/green Container (shaped Polygons) with CSS / CSS3 ?

Answer 1

You could use a basic SVG path

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 represents the first coordinates;
• Lx y represents a straight line from previous coordinates to (x, y).

(you can find further information about path on MDN)

---

Result

Then you may add text or markup inside the SVG using the <foreignObject>...</foreignObject> element, e.g. suppose we need to insert a 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>

along with some basic CSS

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

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

the final result is http://codepen.io/anon/pen/QbMEeW

---

and you can even apply some CSS transformation to the SVG element itself, e.g.

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

so it can look as in your example.

Answer 2

You could use a clip path for this: (although I have to admit, browser support isn't incredible):

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>

further reading:

• clip path on css-tricks
• canIuse to see browser support

---

SVG Approach

you could also create such a shape using 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>

disclaimer

Please note I am still learning SVG myself, so it may require some tweaking of values.