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