SomeStudent SomeStudent - 3 months ago 13
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 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:

<header class="myClass">

<h1>MyHeader</h1>

<p>COmments
</p>

<p>Ever More comments</p>

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


Edit: This is the CSS.

@import url(https://fonts.googleapis.com/css?family=Oswald:300|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

The CSS for clip-path in chrome is supported as "-webkit-clip-path".

Use:

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

The browser will now render the effect.

Comments