Slanting section #svg #html #css #sass

slanting-section.html

// HTML

<section>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none" id="skew-top">
    <polygon points="0,0 0,100 100,0"/>
  </svg>
...
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 100 100" preserveAspectRatio="none" id="skew-bottom">
    <polygon points="0,100 100,0 100,100"/>
  </svg>
</section>

// CSS

section {
  position: relative;
  overflow-x: hidden;
}

#skew-top,
#skew-bottom {
  position: absolute;
  width: 100%;
  height: 2vw; /* keeps angle constant, use px if you want otherwise */
  fill: white;
  stroke-width: 0;
}

#skew-top {
  top: 0;
}

#skew-bottom {
  bottom: 0;
}