|
|||
Headline Hintergrund mit Bild automatisch verlängern
Halli Hallo liebe CSS-Gemeinde,
ich habe eine, für euch wohl sehr leicht beantwortbare Frage. Leider wusste ich nicht genau wie ich danach suchen soll, deshalb stelle ich meine Frage nun einmal hier in der Hoffnung, dass ihr mir helfen könnt Zur Frage: Zum Beispiel habe ich eine Headline (h2) und möchte diese mit einem farbigen Hintergrund unterlegen. Natürlich kein Problem. Nun soll an der rechten Seite dieser Hintergrund schräg abfallen mit abgerundeten Ecken. Diese Ecken muss ich wohl mit einem Bild darstellen. Ich habe das mal in der folgenden Grafik bildlich dargestellt: Wie kann ich dies Realisieren, sodass das Bild mit dem Text/Hintergrund weiter nach rechts rutscht? Vielen Dank für Eure Hilfe. Raudi |
Sponsored Links |
|
|||
Hallo
Zitat:
Eine Möglichkeit wäre zum Beispiel folgende, die ich einfach mal quick & dirty erstellt habe: Code:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt --> <title>Transform</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) --> <style> /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */ header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { -moz-box-sizing: border-box; box-sizing: border-box; } html { font-size: 120%; } body { padding: 0; display: flex; flex-direction: column; align-items: flex-start; } div { display: inline-block; background-color: #211BA3; padding: 0; border-radius: 0 0.3rem 0.3rem 0; margin: 1rem 1rem; /* Skew */ -webkit-transform: skew(-20deg); transform: skew(-20deg); } h1 { color: white; background-color: #211BA3; padding: 0.5rem; margin: 0 1.5rem 0 -1rem; -webkit-transform: skew(20deg); transform: skew(20deg); } </style> </head> <body> <div> <h1>Headline</h1> </div> <div> <h1>Head...</h1> </div> <div> <h1>Headline zwei</h1> </div> <div> <h1>H</h1> </div> </body> </html> Da du keinen Link zu deiner Seite gegeben hast ist leider nur so ein allgemeines Beispiel möglich. Die Abstände (padding, margin) und die Rundung der beiden rechen Ecken (border-radius) kannst du dann nach deinen Vorstellungen anpassen. Gruss MrMurphy Geändert von MrMurphy (21.04.2015 um 17:15 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hintergrund automatisch anpassen | Wenqu | CSS | 3 | 15.07.2009 11:42 |
Hintergrund automatisch verlängern | gamefrog | CSS | 3 | 16.01.2009 16:24 |
Bild mit Rahmen aus Bild | Holger (HMR) | CSS | 3 | 21.05.2008 12:55 |
Divs automatisch verlängern | tmarx | CSS | 1 | 07.06.2006 13:26 |
Hintergrund bild "langziehen" | Roar | CSS | 4 | 13.09.2004 20:48 |