.ribbon:before { display: block; content: attr(ribbon); background: #eee; } .ribbon:after { display: block; content: " "; border-left: 5px dotted transparent; border-top: 5px solid #ccc; height: 0; width: 0; } /*** Non-Functional Apperance Styles ***/ div.ribbon { margin: 20px; float: left; font-size: 11px; font-family: Arial; } div.ribbon:before { padding: 2px 3px; }
<div>ribbonElement.setAttribute('ribbon', <input id="attrText" type="text"/>)</div> <div id="ribbon" class="ribbon" ribbon="I am a CSS Ribbon"></div>