tophirsch
erster Hirsch am Platze
Guten Tach,
ich möchte mit CSS eine Art Pfeil mit Beschriftung erstellen. Ähnlich wie hier, 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
ich möchte mit CSS eine Art Pfeil mit Beschriftung erstellen. Ähnlich wie hier, 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
Zuletzt bearbeitet: