html - How to add arrow to div? -

html - How to add arrow to div? -

i trying create error label div arrow, have problem centering.

i get:

i need like:

html:

<div class="error-label-arrow"></div> <div class="error-label">this field required.</div>

css:

div.error-label{ padding: 7px 10px 0 4px; color: #fff; background-color: #da362a; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } div.error-label-arrow{ border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-right:10px solid #da362a; float: left; }

is possible?

here fiddle

you can utilize css pseudo classes this, hence won't need "arrow" element:

div.error-label{ padding:10px; color: #fff; background-color: #da362a; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width:190px; margin:30px; } div.error-label:before { content: ' '; height: 0; position: absolute; width: 0; left:10px; border: 10px solid transparent; border-right-color: #da362a; }

live demo: http://jsfiddle.net/p9zpg/

html css css-shapes