How to remove excess space in a div background color?-CodePudding

This is how i would like it to look like, but theres a excess space around the colors. Its set to 25vh for relative height

body {background: rgb(0, 0, 0);}
div {position: relative; height: 25vh;}
#layer-01 {background: red; 
    clip-path: polygon(0 0, 100% 0, 100% 28.57142857%, 0 14.28571429%);}
#layer-02 {background: green;
    clip-path: polygon(0 14.28571429%, 100% 28.5714285715%, 100% 42.85714285%, 0 57.14285714%);}
#layer-03 {background: blue;
    clip-path: polygon(0 57.14285714%, 100% 28.5714285715%, 100% 85.71428571%, 0 71.42857143%);}
#layer-04 {background: white;
    clip-path: polygon(0 71.42857143%, 100% 85.71428571%, 100% 100%, 0 100%);}

  <div id="layer-01"></div>
  <div id="layer-02"></div>
  <div id="layer-03"></div>
  <div id="layer-04"></div>

CodePudding user response：

Add margin-top in negative and margin-top 0 for first layer as below

 div {
        position: relative;
        height: 25vh;
        margin-top: -25vh;
      }
      #layer-01 {
        background: red;
        margin-top: 0;
        clip-path: polygon(0 0, 100% 0, 100% 28.57142857%, 0 14.28571429%);
      }

CodePudding user response：

How about this?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background: rgb(0, 0, 0);
      }
      div {
        position: absolute;
        height: 80vh;
        margin: 10vh 0;
        width: 100vw;
      }
      #layer-01 {
        background: red;
        clip-path: polygon(0 0, 100% 0, 100% 28.57142857%, 0 14.28571429%);
      }
      #layer-02 {
        background: green;
        clip-path: polygon(
          0 14.28571429%,
          100% 28.5714285715%,
          100% 42.85714285%,
          0 57.14285714%
        );
      }
      #layer-03 {
        background: blue;
        clip-path: polygon(
          0 57.14285714%,
          100% 28.5714285715%,
          100% 85.71428571%,
          0 71.42857143%
        );
      }
      #layer-04 {
        background: white;
        clip-path: polygon(
          0 71.42857143%,
          100% 85.71428571%,
          100% 100%,
          0 100%
        );
      }
    </style>
  </head>
  <body>
    <div id="layer-01"></div>
    <div id="layer-02"></div>
    <div id="layer-03"></div>
    <div id="layer-04"></div>
  </body>
</html>

changes:


          div {
            position: absolute;
            height: 80vh;
            margin: 10vh 0;
            width: 100vw;
          }