通過帶有動畫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>