通过带有动画jquery的traingles绘制六角形

Question

我有绘制六角形的小问题。

我想绘制6个三角形的形状（六边形），我也想动画当前悬停。例如：http://i.stack.imgur.com/TxG18.png

jquery，css或html5解决方案？

Answer 1

我只花了25分钟建设这个给你纯CSS3：http://jsfiddle.net/X8M5T/3/

你总是可以制定一个JavaScript函数，将生成的HTML和CSS与正确的计算结果，这样就可以很容易地改变尺寸的三角形。

<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>