CSS-Menüband mit Innenpfeil rechts
Ich möchte einen Farbbandeffekt wie auf diesem Bild erzeugen (der rote Teil des Bildes):
Wenn ich versuche, einen Pfeileffekt mit Rahmen zu erstellen, wird die Form des Objekts vollständig zerstört:
HTML Quelltext:
<a href="#" class="mali_oglas_kategorija">Kategorija</a>
Bisheriger CSS-Code (ohne zu versuchen, den Pfeil zu erstellen):
.mali_oglas_kategorija {
position: relative;
display: inline-block;
font-weight: bold;
width: 100px;
padding: 6px 20px 6px 40px;
margin: 10px 10px 10px -18px;
color: #e5e5e5 !important;
background-color: #760000;
-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
-moz-box-shadow: 0px 2px 4px rgba(0,0,0,.5);
box-shadow: 0px 2px 4px rgba(0,0,0,.5);}
.mali_oglas_kategorija:after{
content: ' ';
position: absolute;
width: 0;
height: 0;
left: 0px;
top: 100%;
border-width: 5px 10px;
border-style: solid;
border-color: #470000 #470000 transparent transparent;
}
Irgendeine Idee, wie ich das schaffen kann?