css pentagon 无法正常工作答案

【问题标题】：css pentagon not working as it shouldcss pentagon 无法正常工作
【发布时间】：2013-11-19 02:43:08
【问题描述】：

所以我在帮助一个朋友 - 比我想象的要难 - 使用 css 的五边形。

如果您打开this link，您就会明白这一点，它只是用 css 完成并旋转/对齐到正确位置的 5 个三角形。

但我想在鼠标悬停时提供一些动画。问题是，正如您可以测试的那样，绘制了三角形，但它们的 div 仍然是矩形并与其他 div 重叠。有什么方法可以解决这个问题，而不必将三角形分开更远？

对齐在this jsfiddle 中未按预期工作。 jsfiddle中的代码如下所示

HTML

<body>
<div id="pentagontopleft" class="pentagon"></div>
<div id="pentagontopright" class="pentagon"></div><br>
<div id="pentagonbotleft" class="pentagon"></div>
<div id="pentagonbotright" class="pentagon"></div><br>
<div id="pentagonbotmid" class="pentagon"></div>
</body>

CSS

#pentagontopleft {
  margin:70px 0 5px 150px;
  position: relative;
  border-width: 0 164px 222px 164px;
  border-style: solid;
  border-color: #37272e transparent;
  display: inline-block;
  transform:rotate(144deg);
    -ms-transform:rotate(144deg); /* IE 9 */
    -webkit-transform:rotate(144deg); /* Safari and Chrome */
}

#pentagontopright {
  margin:70px 0 5px -180px;
  position: relative;
  border-width: 0 164px 222px 164px;
  border-style: solid;
  border-color: #37272e transparent;
  display: inline-block;
  transform:rotate(216deg);
    -ms-transform:rotate(216deg); /* IE 9 */
    -webkit-transform:rotate(216deg); /* Safari and Chrome */
}

#pentagonbotright {
  margin:-85px 0 5px -80px;
  position: relative;
  border-width: 0 164px 222px 164px;
  border-style: solid;
  border-color: #37272e transparent;
  display: inline-block;
  transform:rotate(288deg);
    -ms-transform:rotate(288deg); /* IE 9 */
    -webkit-transform:rotate(288deg); /* Safari and Chrome */
}

#pentagonbotleft {
  margin:-85px 0 5px 100px;
  position: relative;
  border-width: 0 164px 222px 164px;
  border-style: solid;
  border-color: #37272e transparent;
  display: inline-block;
  transform:rotate(72deg);
    -ms-transform:rotate(72deg); /* IE 9 */
    -webkit-transform:rotate(72deg); /* Safari and Chrome */

}

#pentagonbotmid {
  margin:-150px 0 5px 225px;
  width: 0;
  border-width: 0 164px 222px 164px;
  border-style: solid;
  border-color: #37272e transparent;
  display: inline-block;
}

canvas {
  margin-left: -50px;
}

$(document).ready(function() {
  $('.pentagon').mouseenter(function() {
    $(this).css('border-color','red transparent');
  });
  $('.pentagon').mouseleave(function() {
    $(this).css('border-color','#37272e transparent')
  })
});

【问题讨论】：

您是否尝试过覆盖地图？ w3schools.com/tags/tag_area.asp
要在没有地图的情况下做到这一点，您必须使用一种方法like this one
谢谢你们的回复，我认为地图方法对我有用:)
我稍微清理了你的代码。尝试始终使用类而不是 ID（这样您就可以拥有多个这样的东西并节省为新版本编写代码）。 Cleaned up version。我玩弄了我链接的方法，由于z-index问题很难正确

标签： javascript jquery html css

【解决方案1】：

只为你...

尝试覆盖地图！ - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

还有：http://w3schools.com/tags/tag_area.asp

【讨论】：

W3 Fools。当涉及到这样的事情时，请使用 Mozilla 参考资料或其他一些有信誉的资源