How do i add a border to a background shape as made in my code?

Question

Recently i had some problems making a background which was responsive on all devices.

Somebody helped me really good with this here on Stack Overflow, but we were not able to create a border at the top and bottom of the blue and green shapes.

Is it possible to do that with this code? Or do we need an other solution?

Thanks in advance.

Edit: sorry i was not clear with my question. The borders must be on the bottom of the blue shape and on the top of the green shape.

.box {
  padding:70px 50px;
  background:
    linear-gradient(to top    right,transparent 49.5%,blue  50%) top   ,
    linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom,
    red;
  background-size:100% 20px;
  background-repeat:no-repeat;
  border-bottom:50px solid green;
  border-top:   50px solid blue;
  clip-path:polygon(0 0,100% 20px,100% calc(100% - 20px),0 100%);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

Answer 1

I would add more gradient to my previous solution like below:

.box {
  --b:50px; /* border width*/
  --a:20px; /* to control the angle (use vw unit to keep the same angle on resize)*/
  --t:5px; /* extra border*/

  padding:calc(50px + var(--a)) 50px;
  background:
    /* Top part*/
     /* blue border*/
     linear-gradient(to top    right,transparent 49.5%,blue  50%) top,
     /*Bottom black border*/
     linear-gradient(black,black) top calc(var(--t) - var(--a)) center,
     linear-gradient(to top    right,transparent 49.5%,black 50%) top var(--t) center, 
    
    /*Bottom part*/
    /* Green border*/
     linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom,
     /* Top black border*/    
     linear-gradient(black,black) bottom calc(var(--t) - var(--a)) center,
     linear-gradient(to bottom right,transparent 49.5%,black 50%) bottom var(--t) center, 
    /*main background*/
    red;
  background-size:100% var(--a);
  background-repeat:no-repeat;
  border-bottom:var(--b) solid green;
  border-top:   var(--b) solid blue;
  clip-path:polygon(0 0,100% var(--a),100% calc(100% - var(--a)),0 100%);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

<div class="box" style="--a:5vw;--t:10px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

<div class="box" style="--a:80px;--b:10px;--t:2px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

Or another idea with less of code where you can rely on skew transformation but you want have a good control over the angle:

.box {
  padding:80px 50px;
  margin: 100px auto;
  background:red;
  position:relative;
}
.box:before,
.box:after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-30px;
  height:60px;
  background:blue;
  border-bottom:5px solid;
  transform:skewY(2deg);
}
.box:after {
  bottom:-30px;
  top:auto;
  background:green;
  border-top:   5px solid;
  border-bottom:none;
  transform:skewY(-2deg);
}

<div class="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
</div>

Answer 2

This seems to work and is quite simple if I understand the question correctly:

.box {
  padding:70px 50px;
  background:
    linear-gradient(to top    right,transparent 49.5%,blue  50%) top   ,
    linear-gradient(to bottom right,transparent 49.5%,green 50%) bottom,
    red;
  background-size:100% 20px;
  background-repeat:no-repeat;
  border-bottom:50px solid green;
  border-top:   50px solid blue;
  clip-path:polygon(0 0,100% 20px,100% calc(100% - 20px),0 100%);
}

.container {
  background-color: black;
  padding: .5em 0 .5em 0;
  clip-path:polygon(0 0,100% 20px,100% calc(100% - 20px),0 100%);
}

<div class="container">
  <div class="box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec dignissim, ipsum et commodo semper, tellus orci ultricies elit, et volutpat dolor neque ac lectus. Fusce vel enim nulla. Nam a aliquam diam, vel mattis velit. Phasellus egestas suscipit lacus a ornare. Morbi luctus sapien nec metus faucibus rutrum. Integer hendrerit auctor libero, vitae imperdiet quam. Aliquam facilisis aliquam efficitur.

  Ut dictum mauris a sagittis eleifend. Maecenas in libero et nibh sollicitudin ultricies. Nunc euismod luctus sapien sed malesuada. Sed eleifend a odio sit amet auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum condimentum tempor. Ut viverra venenatis diam tincidunt condimentum. Morbi vehicula dolor risus, eget sollicitudin ipsum semper venenatis. Nullam sollicitudin non libero sed tincidunt.

  Quisque suscipit aliquam ipsum, vel convallis nisl pretium id. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc a magna ullamcorper, commodo nibh vel, venenatis sem. Nullam cursus lobortis diam, eu malesuada elit aliquet a. Vivamus rutrum erat libero, nec congue magna maximus sed. Vestibulum ut orci semper, consectetur ligula et, scelerisque nisl. Nulla sit amet ullamcorper nunc. Sed fringilla elit nec mollis aliquet. Sed tempor leo ac placerat tincidunt. Sed nisl purus, aliquam et fermentum vel, lacinia quis purus. Integer vulputate leo in eros molestie varius. Donec eu ante laoreet arcu eleifend pharetra. Quisque laoreet orci id justo posuere consectetur. Sed sodales tristique erat, nec viverra velit feugiat vel. Fusce quam nibh, pretium at turpis ut, vulputate sollicitudin dui. Fusce vulputate ex vitae dolor auctor efficitur.
  </div>
</div>