Currently I am trying to learn HTML, along with CSS and have come across clip-paths. Namely from this website http://codepen.io/chriscoyier/pen/EVQweM
My understanding is that using clip-paths, such as the polygon attribute, allows you to prevent certain parts from being rendered thus allowing you to create unique looking background containers or so.
However, when I try to do it on my HTML code, with the CSS being directly copied, I do not see a similar behavior. My behavior is that it simply behaves like a large rectangle. Why is that?
This is the HTML:
<p>Ever More comments</p>
<p>Yep, ever more lines of code</p>
font-family: 'Arimo', sans-serif;
clip-path: polygon(0 0, 100% 4%, 100% 93%, 0 100%);
font-family: 'Oswald', sans-serif;
The CSS for clip-path in chrome is supported as "-webkit-clip-path".
-webkit-clip-path: polygon(0 0, 100% 4%, 100% 93%, 0 100%);
The browser will now render the effect.