<div class="section"></div>

<div class="section title">
  <h1>Diagonal bg?</h1>
</div>

<div class="section"></div>

<div class="section borders">
  <h2>Option 1: border</h2>
</div>

<div class="section"></div>

<div class="section gradient">
  <h2>Option 2: linear-gradient()</h2>
</div>

<div class="section"></div>

<div class="section svg">
  <h2>Option 3: SVG</h2>
</div>

<div class="section"></div>

<div class="section clip">
  <h2>Option 4: clip-path()</h2>
</div>

<div class="section"></div>

<div class="section skew">
  <h2>Option 5: skewY()</h2>
</div>

<div class="section"></div>
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Reenie Beanie", Tahoma, sans-serif;
}

h1, h2 {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 400;
  line-height: 1.4;
}
h1 { font-size: 70px; }
h2 { font-size: 50px; }

.section {
  min-height: 33.33vh;
  
  &:nth-child(even) {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #f25f5c;
  }
  
  &:nth-child(even):not(.title) {
    outline: 1px dashed rgba(0,0,0, .3);
  }
}

.title {
  position: relative;
  padding: 100px 0;
  overflow: hidden;

  &::before, &::after {
    content: '';
    position: absolute;
    border-width: 0 0 50px 100vw;
    border-style: solid;
  }
  &::before {
    top: 0;
    border-color: #fff #fff #f25f5c #fff;
  }
  &::after {
    bottom: 0;
    border-color: #f25f5c #f25f5c #fff #f25f5c;
  }
}


// Option 1: border
.borders {
  position: relative;
  padding: 100px 0;
  overflow: hidden;

  &::before, &::after {
    content: '';
    position: absolute;
    border-width: 0 0 50px 100vw;
    border-style: solid;
  }
  &::before {
    top: 0;
    border-color: #fff #fff #f25f5c #fff;
  }
  &::after {
    bottom: 0;
    border-color: #f25f5c #f25f5c #fff #f25f5c;
  }
}

// Option 2: linear-gradient()
.gradient {
  padding: 100px 0;
  background:
    linear-gradient(to right bottom, #fff 0%, #fff 50%, #f25f5c 50%, #f25f5c 100%) top no-repeat,
    linear-gradient(to right bottom, #f25f5c 0%, #f25f5c 50%, #fff 50%, #fff 100%) bottom no-repeat;
  background-size: 100% 50px;
}

// Option 3: SVG
.svg {
  position: relative;
  padding: 100px 0;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50px;
  }
  &::before {
    top: 0;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" class="top triangle" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#fff"><path d="M0 0h100L0 100z"/></svg>');
  }
  &::after {
    bottom: 0;
    background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" class="bottom triangle" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#fff"><path d="M100 0v100H0z"/></svg>');
  }
}

// Option 4: clip-path()
.clip {
  position: relative;
  padding: 50px 0;
  background-clip: padding-box;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  
  &::before, &::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 50px;
    background-color: inherit;
  }
  &::before {
    bottom: 100%;
    -webkit-clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
  }
  &::after {
    top: 100%;
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
  }
}

// Option 5: skewY()
.skew {
  position: relative;
  z-index: 1;
  
  &::before, &::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 50%;
    background-color: inherit;
    transform: skewY(-3deg); // magic number
  }
  &::before {
    top: 0;
    transform-origin: 0;
  }
  &::after {
    bottom: 0;
    transform-origin: 100% 100%;
  }
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.