Danke für eure Antworten und Hilfe. Ich habe es jetzt mit SVG umgesetzt und es war genau das was ich gesucht habe. Als dankeschön nun das fertige Puzzle:
[Blockierte Grafik: http://i.imgur.com/F84L6da.jpg]
Liebe Grüße und ein großes Dankeschön
Lukas L
Ich wollte mal probieren ein Menü bzw. sowas ähnliches wie eine Navbar aus diesen Formen zu bauen. Am Ende sollte es ein Rechteck gefüllt mit Dreiecken sein und mit klick auf eins der Dreiecke kommt man zu einer anderen Seite. Ich hab ein bisschen recherchiert und dachte float wäre dazu am besten die Formen zusammenzusetzen. Aber scheinbar ist es ja eher komplizierter, was aber auch mit den Dreiecken die keine wirklichen sind zusammenhängt. Jetzt frage ich mich nach deiner Antwort ob es sinnvoller wäre sofort mit img-Elementen zu starten. Das ganze sollte nur ein kleiner Test sein ob das möglich ist 
Dankeschön für die Antwort und die Hilfe. Da hab ich mich tatsächlich ein bisschen sellbst verwirrt mit den Dreiecken. Würdest du bzw. würder ihr, die das lest, denn eine Andere, bessere Methode vorschlagen wie man ohne absolute Positionen den gleichen Effekt erzeugen kann?
Hallöchen,
ich probiere im Moment ein bisschen mit float rum und würde gerne Dreicke dabei "zusammenpuzzeln".
Rot, Orange und Grün haben "float:left".
[Blockierte Grafik: http://i.imgur.com/i1OiYkY.jpg]
Dabei sollte das rote Dreieck eigentlich am orangenen Dreieck anliegen. Alle drei unteren Dreiecke haben "float:left".
Wenn ich den float vom orangenen Dreieck weg mache, dann liegen Rot und Orange zusammen, wie ich es haben will, aber das grüne ist dann natürlich unter dem Ganzen und liegt nicht mehr an.
Nur Rot und Grün haben "float:left". (Oder nur Rot hat "float:left", das läuft natürlich aufs Gleiche hinaus.)
[Blockierte Grafik: http://i.imgur.com/d5Gz75b.jpg]
Ich verstehe einfach nicht, warum diese Lücke erst ensteht wenn ich alle drei Objekte floaten lassen.
HTML:
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box">
<div id="submenu1"></div>
<div id="submenu2"></div>
<div id="submenu3"></div>
<div id="submenu4"></div>
</div>
</body>CSS:
#box
{width:800px;
height: 500px;
background-color:#2EFEF7;}
#submenu1
{width: 0;
height: 0;
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent #007bff;}
#submenu2
{width: 0;
height: 0;
border-style: solid;
border-width: 200px 200px 0 0;
border-color: #ff0000 transparent transparent transparent;
float:left;
}
#submenu3
{width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px 200px;
border-color: transparent transparent #ff7700 transparent;
float:left;
}
#submenu4
{width: 0;
height: 0;
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent #0dff00;
float:left;
}Auch wenn es sich wahrscheinlich um einen offensichtlich dummen Fehler handelt, hoffe ich jemand kann mir beim puzzlen helfen 
LG Lukas