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:



  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich über die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufhübschen könnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmäßig per Mail.
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    Nützliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, Hintergründe, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder stoße ich auf interessante Blogs, Webseiten oder Bücher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    Nützliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz