Question

所以我用这个帮助了一个朋友 - 比我想象的更难 - 五角大楼用css。

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

但我想在鼠标悬停时给出一些动画。问题是，正如你可以测试的那样，三角形被绘制但是它们的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;
}

JS

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

Answer 1

只为你...

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

另外：http://w3schools.com/tags/tag_area.asp

css五边形不能正常工作

1 个答案: