Monday, December 26, 2011

HTML5 arrows

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 {
        width0pxborder-width20pxborder-stylesolid;  
        border-colortransparent 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 {
        width0pxborder-width20pxborder-stylesolid;  
        border-colortransparent 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:

Anonymous said...

I gotta bookmark this site it seems handy invaluable