Ez egy példa szalag

Lejjebb a beállításokhoz találtok leírást. :)

HTML kód:

<h1 class="ribbon">

<strong class="ribbon-content">Ez egy példa szalag</strong></h1>

CSS kód:

<style type="text/css">

.ribbon {

 font-size: 16px !important;

 width: 50%;

font-family: georgia;

font-style: italic;

 position: relative;

 background: #ba89b6;

 color: #fff;

 text-align: center;

 padding: 1em 2em;

 margin: 2em auto 3em;

}

.ribbon:before, .ribbon:after {

 content: "";

 position: absolute;

 display: block;

 bottom: -1em;

 border: 1.5em solid #986794;

 z-index: -1;

}

.ribbon:before {

 left: -2em;

 border-right-width: 1.5em;

 border-left-color: transparent;

}

.ribbon:after {

 right: -2em;

 border-left-width: 1.5em;

 border-right-color: transparent;

}

.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {

 content: "";

 position: absolute;

 display: block;

 border-style: solid;

 border-color: #804f7c transparent transparent transparent;

 bottom: -1em;

}

.ribbon .ribbon-content:before {

 left: 0;

 border-width: 1em 0 0 1em;

}

.ribbon .ribbon-content:after {

 right: 0;

 border-width: 1em 1em 0 0;

}</style>