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

    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

    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

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.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem nächsten Newsletter for free


  • Die 1 Cent pro Klick Formel
  • 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)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed