Flexible Ribbons mit CSS

Ribbons sind im Web ein sehr beliebtes Gestaltungselement und die Umsetzung mit CSS hat einige Vorteile. Einerseits eignet sich die CSS-Grafik für den Einsatz auf hochauflösenden Displays (HiDPI, Retina), andererseits kann dem Ribbon eine flexible Breite in Prozent zugewiesen werden. Das Zielelement kann somit im Responsive Webdesign verwendet werden und passt sich flexibel der Displaybreite an.

CSS-Umsetzung des Ribbon

Mit folgendem HTML/CSS-Code wird der Ribbon hergestellt. Ich habe die drei Bestandteile des Elements in Rot, Grün und Blau eingefärbt, damit ihr schneller erkennt welcher Codeabschnitt welchen Effekt erzeugt.

HTML-Code

Der HTML-Code ist sehr übersichtlich. Text kann innerhalb von ribbon-fold eingefügt werden.

<div class="ribbon">
  <div class="ribbon-fold"></div>
</div>

CSS-Code

Der CSS-Code sieht so aus:

.ribbon {
  width: 450px;
  position: relative;
  background:red;
  height: 80px;
  margin:50px auto;
}

.ribbon::before, .ribbon::after {
  content: "";
  position: absolute;
  display: block;
  bottom: -25px;
  border: 40px solid green;
  z-index: -1;
}

.ribbon::before {
  left: -75px;
  border-right-width: 60px;
  border-left-color: transparent;
}

.ribbon::after {
  right: -75px;
  border-left-width: 60px;
  border-right-color: transparent;
}

.ribbon .ribbon-fold:before, 
.ribbon .ribbon-fold:after {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: blue transparent transparent transparent;
  bottom: -25px;
}

.ribbon .ribbon-fold:before {
  left: 0;
  border-width: 25px 0 0 25px;
}

.ribbon .ribbon-fold:after {
  right: 0;
  border-width: 25px 25px 0 0;
}

Live-Beispiel anzeigen

Gestaltete Variante

Mit Text, harmonischen Farben und einem leichten Verlauf im Vordergrund, sieht es doch gleich noch besser aus.

Live-Beispiel anzeigen

Links / Quellen:

• CSS Snippet Ribbon – CSS Tricks

Geschrieben von:

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing