Archiv-Modus von Basti1012 Lösungspage

Hallo, ich habe eine Idee für eine neue Startseite. Ich möchte den Hintergrund nicht als Bild, sondern mit CSS, weiß aber nicht so richtig ob und wie das geht. Das angehängte Bild soll das mal verdeutlichen. Ich wäre euch dankbar, wenn ich mir dabei behilflich sein könntet. <img class="vorschau" src="image/image_4354.jpg" alt="Bild wie User es gerne hätte">

Code

                                    
                                <html>
  <head>
    <script src="/js_webseite/jquery.js"></script>
    <style>
      p{
  position:fixed;
  top:100px;
  left:100px;
}
body {
background: #ffffff;
  width:150%;
  overflow:hidden;
  margin-left:-25%;
  margin-top:-3%;
}
.up {
width: 0px;
border-bottom: 10vw  solid #000;
border-left: 7.5vw solid transparent;
border-right: 7.5vw solid transparent;
}
.down {
width: 0px;
border-top: 10vw solid #000;
border-left: 7.5vw solid transparent;
border-right: 7.5vw solid transparent;
}
.tri {
  float: left;
  margin-left:-4.5%;
  margin-bottom: 4px;
}
.line:nth-child(even){
  margin-left:5vw;
}
#conti{
  border:3px solid red;
  height:20vw;
  width:80%;
  position:absolute;
 left:10%;
  top:30vh;
  text-align:center;
  background:rgba(0,0,222,0.7);
  font-size:25px;
  color:white;
  display:flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
 
      
    </style>
  </head>
  <body>
<body>
<main>
<div id="a" class='tri-row-odd'>
  <div id="conti">
    Container
    </div>
</div>
  </main>
  <script>
    los(15) 
function los(h){
  var g='';
  for(a=0;a<=h;a++){
    g+='<div class="line">';
    for(d=0;d<=10;d++){
    g+="<div class='tri up'></div><div class='tri down'></div>";
    }
    g+='</div><br>';
  }
    $( ".tri-row-odd" ).append(g);

}
    
    </script>
</body>

basti1012.bplaced.net

Layout Startseite schrägen mit CSS

Code