draw hexagon by traingles with animate jquery

Question

I have a litte problem with drawing a hexagon.

I would to like to draw shape ( hexagon ) by 6 triangles and I also would like to animate current hover. Example: http://i.stack.imgur.com/TxG18.png

Jquery , css or html5 solutions ?

Answer 1

I just spent the last 25 minutes building this for you in pure CSS3: http://jsfiddle.net/X8M5T/3/

You can always formulate a javascript function that will generate the HTML and CSS with the correct calculations so that you can easily change the dimensions of the triangles.

<style type="text/css">
  .t {
     top:55px;
     left:5px;
  }
  .t div {
     position:absolute;
     width: 0px;
     height: 0px;
     border-style: solid;
     border-width: 0 100px 173.2px 100px;
     border-color: transparent transparent #0079c5 transparent;
     transition:all 1s;
     -webkit-transition:all 1s;
     -moz-transition:all 1s;
     cursor:pointer;
     transform-origin:200px 173px;
     -webkit-transform-origin:200px 173px;
     -moz-transform-origin:200px 173px;
     z-index:10;
  }
  .t div:hover {
     z-index:20;
     border-color: transparent transparent #009cff transparent;
  }
  .t div:nth-child(1) {
     transform:rotate(30deg);
     -webkit-transform:rotate(30deg);
     -moz-transform:rotate(30deg);
  }
  .t div:nth-child(1):hover {
     transform:rotate(30deg) translate(-15%, -10%);
     -webkit-transform:rotate(30deg) translate(-15%, -10%);
     -moz-transform:rotate(30deg) translate(-15%, -10%);
  }
  .t div:nth-child(2) {
     transform:rotate(90deg);
     -webkit-transform:rotate(90deg);
     -moz-transform:rotate(90deg);
  }
  .t div:nth-child(2):hover {
     transform:rotate(90deg) translate(-15%, -10%);
     -webkit-transform:rotate(90deg) translate(-15%, -10%);
     -moz-transform:rotate(90deg) translate(-15%, -10%);
  }
  .t div:nth-child(3) {
     transform:rotate(150deg);
     -webkit-transform:rotate(150deg);
     -moz-transform:rotate(150deg);
  }
  .t div:nth-child(3):hover {
     transform:rotate(150deg) translate(-15%, -10%);
     -webkit-transform:rotate(150deg) translate(-15%, -10%);
     -moz-transform:rotate(150deg) translate(-15%, -10%);
  }
  .t div:nth-child(4) {
     transform:rotate(-30deg);
     -webkit-transform:rotate(-30deg);
     -moz-transform:rotate(-30deg);
  }
  .t div:nth-child(4):hover {
     transform:rotate(-30deg) translate(-15%, -10%);
     -webkit-transform:rotate(-30deg) translate(-15%, -10%);
     -moz-transform:rotate(-30deg) translate(-15%, -10%);
  }
  .t div:nth-child(5) {
     transform:rotate(-90deg);
     -webkit-transform:rotate(-90deg);
     -moz-transform:rotate(-90deg);
  }
  .t div:nth-child(5):hover {
     transform:rotate(-90deg) translate(-15%, -10%);
     -webkit-transform:rotate(-90deg) translate(-15%, -10%);
     -moz-transform:rotate(-90deg) translate(-15%, -10%);
  }
  .t div:nth-child(6) {
     transform:rotate(-150deg);
     -webkit-transform:rotate(-150deg);
     -moz-transform:rotate(-150deg);
  }
  .t div:nth-child(6):hover {
     transform:rotate(-150deg) translate(-15%, -10%);
     -webkit-transform:rotate(-150deg) translate(-15%, -10%);
     -moz-transform:rotate(-150deg) translate(-15%, -10%);
  }

</style>

<div class="t">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
</div>