HTML Zwei dreieckige Bilder

[nierewa]

Hallo,

ich habe eine Seite. Auf der sollen zwei dreieckige Divs mit Bildern drin einen viereckigen Bereich ergeben.
Also in etwa so:

Im Prinzip war meine Idee zwei dreieckige Divs zu erstellen und diese übereinander zu legen.
Ich bekomms aber einfach nicht hin.

Hat jemand eine Idee wie ich das lösen kann?

 

[User007]

Hi...

Guck mal hier - davon kannst Du bestimmt etwas für Dich anpassen.

 

[Yuuri]

https://jsfiddle.net/xwy6hq4r/
https://caniuse.com/#feat=css-clip-path

<div class="container">
  <div class="part part1"></div>
  <div class="part part2"></div>
</div>

<style type="text/css">
.container {
  background: red;
  width: 30rem;
  height: 30rem;
  position: relative;
}

.part {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.part1 {
  background: yellow;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.part2 {
  background: blue;
  clip-path: polygon(100% 100%, 0% 100%, 100% 0);
}
</style>

 

[User007]

@Yuuri: Schön, dass Du's kannst - leider wird durch Präsentieren von fertigem Code nicht das Verständnis für die Funktionsweise sowie Grundlagenwissen vermittelt.

 

[Yuuri]

Ok, clip-path ist wichtig. Brauchst du sonst eine Erklärung zu dem extrem mickrigem Minimalbeispiel?

 

[User007]

@Yuuri: Im Grunde ist mir das egal - ich denk mir nur immer, wenn ich solche Fragestellungen (wie vom TE hier) seh', dass da halt (fast) kein Grundlagenwissen von HTML/CSS vorhanden ist, und das Bereitstellen fertiger Lösungen ändert dann daran auch nix (mehr), weil ja nix mehr selbst erarbeitet werden braucht. 🤷‍♂️
Soll sich bitte niemand von angegriffen fühlen - ist nur meine Meinung!

 

[nierewa]

@Yuuri :
Vielen Dank. clip-path war mir völlig unbekannt.
Das Beispiel funktioniert in Firefox super, aber bei mir zum Beispiel nicht im Edge. Wie könnte man das in nicht unterstützten Browsern händeln?

Wahrscheinlich mit svg... aber ich bin glaub ich zu blöd dazu. Ich bekomm damit die zwei Dreiecke nicht hin.

In der Zwischenzeit hatte ich es so "gelöst"... aber warum kompliziert wenn es auch einfach geht.

<div id="outer">
  <div id="top"><img class="bild bild-top" src="497163.png"></div>
  <div id="bottom"><img class="bild bild-bottom" src="66310.png"></div>
</div>

#top {
    background-color: silver;
    height: 500px;
    left: -250px;
    overflow: hidden;
    position: relative;
    top: -150px;
    transform: rotate(-36.87deg);
    width: 1000px;
}


#bottom {
    background-color: red;
    bottom: 250px;
    height: 500px;
    overflow: hidden;
    position: relative;
    right: -50px;
    transform: rotate(-36.87deg);
    width: 1000px;
}


#outer {
    position: absolute;
    width: 800px;
    height: 600px;
    overflow: hidden;
    background-color:#333333;
}

.bild{
    display: block;
    position: absolute;
    transform: rotate(36.87deg);
}
.bild-bottom{
    bottom: 0px;
    left: 0px;
}
.bild-top{
    top: 0px;
    right:0px;
}

@User007 :
Auch Dir sei Dank. Bei dem von Yuuri geposteten Code kann ich mir die Funktionsweise rausziehen
Die Seite die Du verlinkt hattest hatte ich auch schon gefunden, aber die Divs sollen ja Inhalt haben.

 

[User007]

[...] clip-path war mir völlig unbekannt.

Gibt's ja auch erst seit 2016.

[...] kann ich mir die Funktionsweise rausziehen

Das ist schön.

[...] aber die Divs sollen ja Inhalt haben.

Können sie doch - mit CSS wird doch nur das "Erscheinungsbild" festgelegt, der <DIV>-Container kann doch trotzdem benutzt werden, um andere (Kind-)Elemente zu beinhalten (z.B. sowas meinte ich wg. Grundlagen).

Ansonsten schaust Du evtl. nochmal auf einer der hilfreichsten Seiten zum Thema HTML/CSS im Web, bei SelfHTML - clip-path. Da steht dann nämlich auch was zum Browsersupport und Weiterführendes.

 

[nierewa]

Können sie doch - mit CSS wird doch nur das "Erscheinungsbild" festgelegt, der <DIV>-Container kann doch trotzdem benutzt werden, um andere (Kind-)Elemente zu beinhalten (z.B. sowas meinte ich wg. Grundlagen).

Wenn ich das auf der Seite lese:

Um Dreiecke mit CSS zu erstellen, bedient man sich der „border“-Eigenschaft. Dabei wird zunächst die Höhe und Breite des jeweiligen HTML-Elementes auf Null gesetzt.

glaube ich nicht das es geht.

 

[nierewa]

Ich habe es mit svg hinbekommen.
Durch clipPathUnits="objectBoundingBox" kann ich relative Werte verwenden. Diese relativen Werte liegen zwischen 0 und 1. So wird immer die gesamte Höe bzw. Breite des Bildes verwendet.

#outer {
  position: absolute;
  overflow: hidden;
  background-color:#333333;
  height:100%;
width:100%;
}

.bild{
    display: block;
    position: absolute;
}


.clip-poly-top{
  -webkit-clip-path: url("#clipPolygonTop");
  clip-path: url("#clipPolygonTop");
}
.clip-poly-bottom{
  -webkit-clip-path: url("#clipPolygonBottom");
  clip-path: url("#clipPolygonBottom");
}

<div id="outer">
<div class="bild"><img class="clip-poly-top" src="497163.png" alt="Anders Celsius"></div>
<div class="bild"><img class="clip-poly-bottom" src="66310.png" alt="Anders Celsius"></div>
<div>

<svg width='0' height='0'>
  <clipPath id="clipPolygonTop" clipPathUnits="objectBoundingBox">
    <polygon points="0 0,1 0, 0 1">
    </polygon>
  </clipPath>
</svg>

<svg width='0' height='0'>
  <clipPath id="clipPolygonBottom" clipPathUnits="objectBoundingBox">
    <polygon points="1 0,1 1, 0 1">
    </polygon>
  </clipPath>
</svg>

Es gibt nur ein Problem... wie bekomme ich den Spaß responsiv?
So wie es jetzt ist ändert sich die Bildgröße nicht mit dem Browserfenster.

Ich brauch da echt Hilfe. Auf den verlinkten Seiten hab ich leider nichts gefunden oder vielleicht auch übersehen.

Edit: Ich glaub es ist einfach schon zu spät. Hab einfach vergessen den Bildern eine prozentuale Größe zu geben
😅

Damit läufts.

.bild img{
    width:100%;
    height:100%;
}

Jetzt muß es sich nur noch in der Praxis bewähren.

 

[ger.ruler]

@nierewa: wie sollen denn die Img innerhalb der "Dreiecke" angeordnet werden ? Willst du sie original anzeigen oder mit rotieren ?

 

[nierewa]

Hi. Ganz normal. Also nicht rotiert oder so.
Halt nur einen dreieckigen Ausschnitt, einmal so rum und einmal so rum

 

[nierewa]

Hi,

es gibt ein Problem.
Die SVG-Anweisung funktioniert überall..... nur nicht im Edge, also dem "alten".
Im neue Edge funktioniert es zwar, aber es muß auch im alten gehen.

Kann mir jemand sagen an was das liegt?

Hier mal der entsprechende Code dazu:
https://www.w3schools.com/code/tryit.asp?filename=GFY2S2TMBKJF