How do I add an arrow to a div?
I'm trying to create an error label for a div with an arrow, but centering issue.
I get:
I need something like:
HTML:
<div class="error-label-arrow"></div>
<div class="error-label">This field is 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 it possible?
Here is the fiddle
+3
source to share
2 answers
You can use the CSS Pseudo classes for this, so you don't need the "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/
+15
source to share
div.error-label{
padding: 7px 10px 0 4px;
color: #fff;
background-color: #DA362A;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width: 150px;
margin-left: 5px;
}
div.error-label-arrow{
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #DA362A;
float: left;
height: 1px;
margin-top: 3px;
}
Here is the fiddle
+2
source to share