1

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

enter image description here

jbutler483
  • 24,074
  • 9
  • 92
  • 145
Sebastian
  • 883
  • 11
  • 32
  • 1
    You are better off doing these with SVG than CSS. While it can be achieved with CSS (ways like mentioned in jbutler483's answer), your shape is actually pretty complex in the sense that it has a lot of weird angles. – Harry Jun 15 '15 at 09:46
  • 1
    You could also have a look at [this](http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive), [this](http://stackoverflow.com/questions/29917180/creating-a-tab-shape-with-css-or-svg/29922567#29922567), [this](http://stackoverflow.com/questions/5293736/css3-transform-skew?) and [this](http://stackoverflow.com/questions/19147241/skewed-borders-on-a-div) for some ideas on how to approach. – Harry Jun 15 '15 at 09:50
  • nice, Thanks for the Examples! – Sebastian Jun 15 '15 at 12:08

2 Answers2

6

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.

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
5

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.

jbutler483
  • 24,074
  • 9
  • 92
  • 145