My html css work fine in Codepen but doesn't look right when I open in my environment on Chrome

Question

My codepen looks how I'd like my view to look like but when I run the code in my environment it doesn't look right. I can't figure out whats different since I copied and pasted the same exact code. Im running it on Chrome and also using the codepen in chrome. Could this be some sort of browser compatibility issue though like if codepen is using some other browser engine to render the views. I put the views inside of an Angular template for a directive im using. I compile my site with Grunt .

My Environment

Codepen

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;
}

Answer 1

You should compare your compiled output with the compiled output on codepen.io. I suspect that you may not use the same CSS preprocessor (SCSS) as codepen or maybe another version.

I ran the compiled css and html from codepen locally and everything worked.

Answer 2

解决方法是删除section标签，该标签应用了我的环境angular-fullstack-generator创建的一些其他样式。