[scss / css] Arrowbox/Ribbon nur mit CSS erstellen

[tophirsch]

Guten Tach,

ich möchte mit CSS eine Art Pfeil mit Beschriftung erstellen. Ähnlich wie

You do not have permission to view link please Anmelden or Registrieren

, nur dass der Pfeil genau so hoch wie die Box werden soll.

Das soll von der Form her dann so aussehen, nur einfarbig und mit Text drin:


Aber irgendwo klemmt die Säge noch bei mir. Folgendes hab ich probiert:
[src=html4strict]
<h2 class="block__title">
<a class="block-title-link" href="url">
</h2>
[/src]

[src=css]
.region-frontpage-grid * .block__title {
display: inline-block;
width: 80%;
background-color: red;

&:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 100%;
border: 20px solid transparent;
bordr-left: 20px solid red;
}
}
[/src]


Das kleine Dreieck, was eigentlich direkt da dran gehört, landet aber irgendwo weiter rechts:
Anhang anzeigen 20145

Was zum Henker mache ich da falsch?
Ach ja, und wie bekomm ich das rote Rechteck dann auf die passende Höhe (so hoch wie das Dreieck), sodass der Text dann auch Mittig ist?


PS: Rote Farbe nur zur Verdeutlichung

Edit: Scheiße, Titel vergessen

 

[godlike]

Re: [scss / css]

Würde es ja so machen:

[src=html4strict]<h2 class="h2_head">Da steht der Titel</h2>
<div>Da steht der Inhalt</div>[/src]

+

[src=css].h2_head {
width: 300px;
display: block;
background-image: url(dein-pfad-zum-bild/pfeil_rechts.png);
background-position: right;
background-repeat: no-repeat;
background-color: #CC0000;
margin-bottom: 0px;
}[/src]

Aber wegen der Höhe fällt mir auch nix ein...

 

[accC]

Re: [scss / css]

Schau dir mal abgerundete Ecken in CSS3 an. Dort kannst du 2 Werte angeben, um die Ecken nur einseitig zu "runden", mit etwas Spielerei sollte da auch ein Pfeil heraus kommen.. Für die Höhe wählst du einfach jeweils die gleiche für den Pfeil und für die Box, in die du den Text schreiben möchtest oder du verwendest die selbe Box für beides.

 

[sars]

Re: [scss / css]

Probier mal folgendes zu ergänzen:

[src=css]
.region-frontpage-grid * .block__title {
display: inline-block;
width: 80%;
background-color: red;

/* damit der Pfeil an seinem Platz sitzt, Stichwort: positioning context */
position: relative;

/* der Pfeil ist 40px hoch, so bleibt der Text immer mittig */
line-height: 40px;

...
[/src]

 

[tophirsch]

Sars, du bist der Mann der Stunde!
Echt geil zu sehen, wie das auf einmal nach zig Versuchen klappt.
Is aber auch komisch manchmal, kaum macht mans richtig, dann gehts...