I am trying to create bar graphs with html5. As part of that I needed forward and backward arrows.
I tried to get arrows marked out of html and css3. Here is the result http://jsfiddle.net/harsha/2aq7R/1/embedded/result
Just started with arrow head. This wont show up anything as border is transparent is all sides.
.arrow_head {
width: 0px; border-width: 20px; border-style: solid;
border-color: transparent transparent transparent transparent;
}
Now to get top arrow effect let us show up bottom border.
.top_arrow {
border-bottom-color: #E9E9E9;
}
Similarly to get down arrow let us open up top border
.down_arrow {
border-top-color: #E9E9E9;
}
border-left-color: #E9E9E9;
}
to get left arrow let us open up right border
.left_arrow {
border-right-color: #E9E9E9;
}
Now arrow body is pure border with fixed height and width. so to get right arrow
<div style="float:right">
<div style="width:20px; height:20px; background:#E9E9E9; float:left; margin-top:10px">div>
<div class="arrow_head right_arrow" style="float:left">div>
div>
Similarly all sides can be offset as shown below
HTML>
<html>
<body>
<div style="background:gray; width:300px; padding: 10px; height:40px">
<div style="float:left">
<div class="arrow_head left_arrow">div>
<div style="width:20px; height:20px; background:#E9E9E9; margin-left:40px; margin-top:-30px">div>
div>
<div style="float:right">
<div style="width:20px; height:20px; background:#E9E9E9; float:left; margin-top:10px">div>
<div class="arrow_head right_arrow" style="float:left">div>
div>
div>
<br />
<div style="background:gray; width:300px; padding: 10px; height:40px">
<div style="float:left; margin-top:-20px">
<div class="arrow_head top_arrow">div>
<div style="width:20px; height:20px; background:#E9E9E9; margin-left:10px">div>
div>
<div style="float:right">
<div style="width:20px; height:20px; background:#E9E9E9; margin-left:10px">div>
<div class="arrow_head down_arrow">div>
div>
div>
body>
html>
And here is the css
.arrow_head {
width: 0px; border-width: 20px; border-style: solid;
border-color: transparent transparent transparent transparent;
}
.top_arrow {
border-bottom-color: #E9E9E9;
}
.down_arrow {
border-top-color: #E9E9E9;
}
.right_arrow {
border-left-color: #E9E9E9;
}
.left_arrow {
border-right-color: #E9E9E9;
}
I tried to get arrows marked out of html and css3. Here is the result http://jsfiddle.net/harsha/2aq7R/1/embedded/result
Just started with arrow head. This wont show up anything as border is transparent is all sides.
.arrow_head {
width: 0px; border-width: 20px; border-style: solid;
border-color: transparent transparent transparent transparent;
}
Now to get top arrow effect let us show up bottom border.
.top_arrow {
border-bottom-color: #E9E9E9;
}
Similarly to get down arrow let us open up top border
.down_arrow {
border-top-color: #E9E9E9;
}
to get right arrow let us open up left border
.right_arrow {border-left-color: #E9E9E9;
}
to get left arrow let us open up right border
.left_arrow {
border-right-color: #E9E9E9;
}
Now arrow body is pure border with fixed height and width. so to get right arrow
<div style="float:right">
<div style="width:20px; height:20px; background:#E9E9E9; float:left; margin-top:10px">div>
<div class="arrow_head right_arrow" style="float:left">div>
div>
Similarly all sides can be offset as shown below
HTML>
<html>
<body>
<div style="background:gray; width:300px; padding: 10px; height:40px">
<div style="float:left">
<div class="arrow_head left_arrow">div>
<div style="width:20px; height:20px; background:#E9E9E9; margin-left:40px; margin-top:-30px">div>
div>
<div style="float:right">
<div style="width:20px; height:20px; background:#E9E9E9; float:left; margin-top:10px">div>
<div class="arrow_head right_arrow" style="float:left">div>
div>
div>
<br />
<div style="background:gray; width:300px; padding: 10px; height:40px">
<div style="float:left; margin-top:-20px">
<div class="arrow_head top_arrow">div>
<div style="width:20px; height:20px; background:#E9E9E9; margin-left:10px">div>
div>
<div style="float:right">
<div style="width:20px; height:20px; background:#E9E9E9; margin-left:10px">div>
<div class="arrow_head down_arrow">div>
div>
div>
body>
html>
And here is the css
.arrow_head {
width: 0px; border-width: 20px; border-style: solid;
border-color: transparent transparent transparent transparent;
}
.top_arrow {
border-bottom-color: #E9E9E9;
}
.down_arrow {
border-top-color: #E9E9E9;
}
.right_arrow {
border-left-color: #E9E9E9;
}
.left_arrow {
border-right-color: #E9E9E9;
}
1 comment:
I gotta bookmark this site it seems handy invaluable
Post a Comment