SomeStudent SomeStudent - 1 year ago 102
CSS Question

Understanding clip-path

Currently I am trying to learn HTML, along with CSS and have come across clip-paths. Namely from this website

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:

<header class="myClass">



<p>Ever More comments</p>

<p>Yep, ever more lines of code</p>

Edit: This is the CSS.

@import url(|Arimo);

html {
font-family: 'Arimo', sans-serif;
line-height: 1.4;
body {
margin: 0;

header {
color: white;
background-color: black;

clip-path: polygon(0 0, 100% 4%, 100% 93%, 0 100%);

padding: 5%;
columns: 3;

h1 {
color: yellow;
font-family: 'Oswald', sans-serif;

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download