用动画jquery通过三角形绘制六边形答案

【问题标题】：draw hexagon by traingles with animate jquery用动画jquery通过三角形绘制六边形
【发布时间】：2014-04-15 10:16:21
【问题描述】：

我在绘制六边形时遇到了一点问题。

我想用 6 个三角形绘制形状（六边形），我还想为当前悬停设置动画。示例：http://i.stack.imgur.com/TxG18.png

jQuery、css 或 html5 解决方案？

【问题讨论】：

你到底有什么问题？请展示您到目前为止所做的尝试以及您遇到的问题。
你试过什么？您是否花了一些时间和精力尝试编写代码，或者这是“为我做”的请求？
看起来像是某人的家庭作业，他们希望我们为他们做 ;)

标签： jquery css hover css-shapes

【解决方案1】：

我刚刚用纯 CSS3 为您构建了最后 25 分钟：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>

【讨论】：