CSS Foto schräg abschneiden und Text schräg setzen?

[Dsimon24]

Hallo zusammen,

siehe Screenshot. Ich versuche gerade den rechten Teil aus dem Screenshot umzusetzen.
Das Bild soll schräg geschnitten werden und der Text darunter ebenfalls schräg dargestellt
werden. Wie kann ich das mit CSS am besten realisieren? Leider komme ich da zu keinem
Ergebnis in diese Richtung gehend.

Vielleicht habt ihr einen Tipp für mich?

VG,

 

[SaxnPaule]

Google mal nach: "transform rotate" und "img clip"

 

[NameHere]

Du könntest auch bspw. ein Polygon über das Fotos setzen
clip-path: polygon(0 0, 100% 7%, 100% 100%, 12% 100%);

und den Text über rotate

 

[Cool Master]

.bild-dreieck{
    width: 0px;
    height: 0px;
    border-top: 50px solid transparent;
    border-bottom: 0px solid transparent;
    border-right: 100px solid white;
}

.schraeg-links{
    transform: rotate(-20deg);
}

.schraeg-rechts{
    transform: rotate(20deg);
}