Balken mit Pfeil - ohne Grafik

by Jens Grochtdreis

HTML

<h2 class="bubble">Super wichtige Ăśberschrift</h2>

<div class="bubble">Hier steht ein wichtiger Hinweis, beispielsweise auf ein neues Angebot!</div>

<a href="#" class="bubble">auch ein Link kann so formatiert werden</a>

CSS

.bubble {
   width: 300px; 
   background: #a20000;
   color: #fff;
   margin: 30px 60px; 
   padding: 15px;
    position: relative;
   -moz-border-radius:    10px; 
   -webkit-border-radius: 10px; 
   border-radius:         10px;
}
.bubble:before {
   content:"";
   position: absolute;
   right: 100%;
   top: 20px;
   width: 0;
   height: 0;
   border: 13px solid transparent;
   border-right: 20px solid  #a20000;
}

a.bubble { text-decoration: none;}
a.bubble:before { top: 10px;}
a.bubble:hover { background-color: #000;}
a.bubble:hover:before { border-right-color: #000;}

h2{ font-size: 25px;}