How can I build the white/green Container (shaped Polygons) with CSS / CSS3 ?
CSS Container Wrap shaped Polygons
879 views Asked by Sebastian At
2
There are 2 answers
2
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:
- 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.
You could use a basic
SVG
pathhttp://codepen.io/anon/pen/XbaKLp
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 linkalong with some basic CSS
the final result is http://codepen.io/anon/pen/QbMEeW
and you can even apply some
CSS
transformation to theSVG
element itself, e.g.so it can look as in your example.