javascript - 具有图像和边框的跨浏览器兼容的六边形形状(没有 SVG 或背景图像)

Question

我已经asked once如何在纯 html/css 中创建六边形。在一些帮助下，我找到了一个在 chrome 和 safari 中运行良好的解决方案，但 firefox 和 IE 都不支持 clip-path 属性。

我在上一个问题中已经提到的问题有几个:

1. 我不能使用 SVG (除非有可能用 <img>-element 代替 <image>-element )
2. 我不能将图像用作 background-image通过 CSS
3. Creating a hexagonal shape with borders没有帮助，因为我无法在其中添加图像
4. 图像将加载到 <img>-tag 中
5. 图像可以没有背景，也可以是示例中的普通图片
6. 六边形应该站在一边而不是边上

许多人提出了类似的问题 - 有些可以用 svg 解决，有些不需要边框，有些没有图片 - 但我找不到符合我要求的东西。

body {
  background: orange;
}

.hex {
  display: inline-block;
  position: relative;
  width: 120px;
  height: 103.92px; /* width * 0.866 */
  background: red;
  box-sizing: border-box;
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex-background {
  position: absolute;
  background-color: orange; /*color of the main-background*/
  top: 2px; /* equal to border thickness */
  left: 2px; /* equal to border thickness */
  width: 116px; /* container height - (border thickness * 2) */
  height: 99.92px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

.hex img {
  position: absolute;
  width: 116px; /* container height - (border thickness * 2) */
  height: 99.92px; /* container height - (border thickness * 2) */
  -webkit-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
  -moz-clip-path: polygon(0% 50%, 25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%);
}

<div class="hex">
  <div class="hex-background">
    <img src="https://img.clipartfest.com/5e18aeec4df9d62fe5cb5e198e4c56c8_locked-padlock-lock-icon-lock-and-key-clipart-transparent-background_420-420.png">
  </div>
</div>

我已经准备好在 chrome 中运行的代码 here .正如您所看到的，我可以创建六边形，有一个边框并加载一个图像，即使它有透明背景。

任何人都可以帮助我使这个跨浏览器兼容吗？这甚至可以满足我的要求吗？是否有可能使用 javascript 或 jquery 实现此目的？

一如既往，我们将不胜感激。

编辑

看来这几乎是不可能的。

我有一个想法，我不确定是否可行:

是否有可能通过 img 元素 src 获取源(例如“lalala/lala.png”)并将该 img 元素与 jquery 或 javascript 的 svg 方法所需的构造交换？

提供:

<img src="lalala/lala.png">

在 js 中:

get src /* result = "lalala/lala.png" */
delete <img src="lalala/lala.png">
put <svg width="a" height="b">
        <image xlink:href="lalala/lala.png" width="a" height="b" />
    </svg>
    where <img scr="lalala/lala.png> has been

注意

我已经编辑了上面列表中的要求。

为什么会有这么多要求？好吧，问题在于将在六边形内显示的图像是由后端提供的，用户可以在其中上传图像(很可能是 .jpg 或 .png 格式)。后端将在 html 结构中提供这些图像，如下所示:

<img src="somepath/examplepic.png" alt="something"> 

特别是这部分比我最初想象的要困难得多。这个问题的许多解决方案包括 css-style

background-image: url("somepath/examplepic.png");

这不起作用，因为后端将提供上述图片。我的老板禁止内联样式。

svg 方法也不起作用，因为如果你想要一个被切割成你必须使用的形状的图像

<image xlink:href="lalala/lala.png" width="a" height="b" />

在<svg>-element里面这也不起作用，因为它不是 <img>-element .

所以你看这些要求不是我提出的，因为我想让它变得复杂，而是由于我工作的环境。

Answer 1

我在网上找到了这个解决方案，我不是作者(作者是 Codepen 的 Geoffrey Crofte)，但我简化了一点，它应该可以工作，也许它可以帮助你得到你的解决方案:

    .hexa, .hexa div {
      margin: 0 auto;
      transform-origin: 50% 50%;
      overflow: hidden;
      width: 300px;
      height: 300px;
    }
    .hexa {
      width: 325px;
      height: 230px;
    }
    .hexa div {
      width: 100%;
      height: 100%;
    }
    .hexa {
      transform: rotate(120deg);
    }
    .hex1 {
      transform: rotate(-60deg);
    }
    .hex2 {
      transform: rotate(-60deg);
    }

    <div class="part">
      <h2>Hexagon</h2>
        <div class="hexa">
          <div class="hex1">
            <div class="hex2">
              <img src="http://nexceris.com/wp-content/uploads/2014/04/bokeh-cover-bg.jpg" alt="" width="320" height="313" />
            </div>
          </div>
        </div>
    </div>

工作 fiddle : https://jsfiddle.net/9znph3sb/