相关疑难解决方法(0)

我试图使用HTML5画布元素绘制一些弧和圆 - 这在FF中完美运行但IE8似乎不支持它.

现在,存在Javascript库,似乎使IE8与Canvas一起运行良好.这里可以找到一个例子.

我已经阅读了他们的全部资料,但我无法理解他们是如何让Canvas与IE8一起工作的.有人可以对所使用的方法有所了解吗？

我从互联网上加载了我网站上的多个图像.是否有可能在响应网格中为所有这些图像提供六边形？

<div>
    <img src="link" class="Image">
</div>

<div>
    <img src="link" class="Image">
</div>
...

我发现了多种方法,但您需要src在CSS代码中填写图像.这对我来说是不可能的,因为网站加载来自互联网的随机图像与jQuery所以我不能使用背景图像.

我试过这个:http://jsfiddle.net/8f5m5wv0/

有没有办法设计一个六边形网格的html块？类似于蜜蜂蜂巢.这看起来更像是一个CSS样式任务.

我如何制作这种类型的五角形,-webkit-clip-path因为它不适用于Firefox,IE9等大多数浏览器.

我的代码:http://codepen.io/anon/pen/MYbKrQ

div {
  width: 150px;
  height: 150px;
  background: #1e90ff;
  -webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
  clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

/* Center the demo */
html, body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div></div>

这是我要实现的布局：

我已经使用此CSS创建了六边形：

.hexagon {
  width: 100px;
  height: 55px;
  background: red;
  position: relative;
  display:inline-block;
  margin:0.2em;
}
.hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
.hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
}

但是，我正在寻找如何用图像填充它们。这是一支笔：https : //codepen.io/1istbesser/pen/ddypXK

如何将图像放入六边形以使其覆盖全部？如果在＃hexagon1上使用background-image，则图像仅覆盖中间部分。