My codepen displays perfectly, but when I run the same code on my local environment it looks off. I can't seem to figure out what is causing the difference, especially since I copied and pasted the exact code. Both the codepen and my environment are using Chrome. Could this discrepancy be due to browser compatibility issues or perhaps Codepen is rendering the views differently using another browser engine? The views are enclosed within an Angular template for a directive that I'm implementing. My site is compiled using Grunt.
My Environment
https://i.sstatic.net/6Q4wo.png
Codepen
https://i.sstatic.net/zvOFF.png
HTML
<section id="ribbon">
<ul class="tabs">
<li class="v-zigzag active">Mode 1</li>
<li class="v-zigzag">Mode 2</li>
<li class="v-zigzag">Mode 3</li>
<li>Mode 4</li>
</ul>
</section>
CSS
@import url(https://fonts.googleapis.com/css?family=Roboto:400);
body {
margin: 0;
padding: 0;
}
#ribbon {
background: whitesmoke;
}
#ribbon ul {
margin: 0;
padding: 0;
height: 100px;
display: flex;
list-style-type: none;
}
#ribbon ul li {
display: flex;
flex-grow: 1;
align-items: center;
justify-content: center;
cursor: pointer;
color: #757575;
font-family: 'Roboto', sans-serif;
font-size: 24px;
}
#ribbon .v-zigzag {
position: relative;
background: linear-gradient(45deg, #757575 5px, transparent 0) 0 5px, linear-gradient(135deg, #757575 5px, whitesmoke 0) 0 5px;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
}
#ribbon .v-zigzag:before {
content: "";
position: absolute;
background: linear-gradient(45deg, whitesmoke 5px, transparent 0) 0 5px, linear-gradient(135deg, whitesmoke 5px, transparent 0) 0 5px;
background-color: transparent;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
right: 3px;
top: 0;
bottom: 0;
}
#ribbon .v-zigzag.active:before {
content: "";
position: absolute;
background: linear-gradient(45deg, #03A9F4 5px, transparent 0) 0 5px, linear-gradient(135deg, #03A9F4 5px, transparent 0) 0 5px;
background-color: transparent;
background-position: right top;
background-repeat: repeat-y;
background-size: 10px 10px;
width: 10px;
right: 3px;
top: 0;
bottom: 0;
}
#ribbon .tabs .active {
background-color: #03A9F4;
color: white;
}