Testing out CSS Clip Path from the provided website led to an unexpected bug. Surprisingly, the code works flawlessly on both CodePen and JSFiddle but fails to execute properly within my local development environment or app.
Here is the snippet of CSS used in attempting to create a polygon:
nav {
position: fixed;
bottom: 0;
background: #BE0F16;
color: #fff;
width: 100%;
padding: 2rem 1rem;
text-align: right;
-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%);
clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%);
-webkit-clip-path: url("#clip-shape");
clip-path: url("#clip-shape");
}
nav .next-chapter {
color: #fff;
padding-left: 1rem;
}
And here's the corresponding HTML:
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href="css.css" rel="stylesheet" />
</head>
<body>
<nav>
<a class="menu"><i title="Menu" class="fa fa-bars"></i><h1 class="visuallyhidden">Menu</h1></a>
<a class="next-chapter" href="/<%=next%>"><i title="Next Chapter" class="fa fa-hand-o-right"></i><span class="visuallyhidden">Next Chapter</span></a>
<a id="comment" href="http://twitter.com/?status=@uebyn"></a>
</nav>
<svg width="0" height="0">
<defs>
<clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
<polygon points="0 0, 0 1, 1 1, 1 .5" />
</clipPath>
</defs>
</svg>
<script src="script.js"></script>
</body>
</html>
Despite following the instructions outlined in the article meticulously, upon opening index.html, I was greeted with a rectangle instead of the anticipated polygon shape. Interestingly, copying the same code to both CodePen and JSFiddle shows the correct polygon rendering.
This anomaly has left me perplexed. Why does Firefox correctly render the CSS clip path on CodePen and JSFiddle but not within my own HTML file? Even after transferring my entire HTML code to CodePen, the issue persists. Any suggestions will be greatly appreciated.