Layout Startseite schrägen mit CSS
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.
Der hier verwendete 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>