Recently, I have been delving into the world of HTML and CSS, exploring clip-paths after stumbling upon them on this captivating website.
My interpretation is that utilizing clip-paths, particularly with the polygon attribute, enables one to control which parts of a design are visible, resulting in distinctive background containers or other creative effects.
However, my attempts to replicate the same effect in my own HTML code by directly replicating the CSS have left me confused. Instead of the desired result, all I see is a plain rectangle. What could be causing this discrepancy?
Here is the snippet of 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: Here is the corresponding 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;
}