Ecke eines Posts abknicken: pure CSS zum Copy & Paste

Ihr seht bei jedem Beitrag im Bild oben links diese abgeknickte Ecke – diese könnt ihr ganz einfach per CSS in euer Theme einbinden. Hier gibt´s den Code-Schnipsel, den ich für das Theme Twenty Fifteen in der Style.css meines Childthemes eingebaut habe – fix und fertig zum Copy & Paste:

.entry-footer:after {content: '';
    width: 0;height: 0;line-height: 0;
    border-right: 50px solid #e0eaf0; 
    border-top: 50px solid #000; 
    top: 0;left: 0;
    position: absolute;
}
.entry-footer {background-color:#e0eaf0; }

Legende: *** Farbe des Hintergrundes der Seite *** Farbe der umgeknickten Ecke *** Größe der Ecke *** Klasse des Div-Containers, der die umgeknickte Ecke bekommen soll – hier das Beispiel des Themes Twenty Fifteen

Kommentare

  1. Hansi Schlegel 16. November 2015 um 16:37 Uhr

    Tolles Script. Ein wunderbare Lösung OHNE das extrene Einbinden …

    Hab aber ein kleines Problem:
    Das „Fenster“ schlißt nicht bei Klick auf das Kreuz.
    Und zwar bei beiden Vrainaten nicht:
    Was mach ich falsch? Bzw. wo könnte mein Denkfehler liegen?

  2. coloritas 16. November 2015 um 17:52 Uhr

    Hallo,
    eine Frage – kann es sein, dass der Kommentar ursprünglich zum Beitrag http://www.ideenlounge.de/der-cookie-hinweis-ohne-plugin-ohne-javascript-zum-copypaste-in-zwei-coolen-styles gehört? Am besten schicke mir mal einen Link, dann kann ich mir das mal ansehen. Gerne per Mail an mirjam@ideenlounge.de. Viele Grüße, Mirjam

Die Ideenlounge macht Pause, daher sind aktuell keine neuen KOmmentare möglich. Folgt mir auf Facebook, dann erfahrt ihr, wann es weiter geht.

Das könnte dich auch interessieren:



  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz