CSS Container Wrap shaped Polygons

879 views Asked by At

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

enter image description here

2

There are 2 answers

2
Fabrizio Calderan On BEST ANSWER

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

enter image description here

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


enter image description here

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.

2
jbutler483 On

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:


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.