Question

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

我在上一个问题中已经说过的问题有几个：

我无法使用SVG（除非有可能使用<img>-element代替<image>-element）
我无法通过CSS

background-image

Creating a hexagonal shape with borders并非没有帮助，因为我无法在
图片将以<img>-tag
图片可以没有背景，也可以是正常图片，如图所示
六边形应该站在不在边缘的一侧

许多人提出了类似的问题 - 有些人可以用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-element src获取源（例如“lalala / lala.png”）并使用jquery或javascript将该img-element与svg-approach所需的构造交换？

提供：

<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风格的

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

不起作用，后端将提供如上所述的图片。我的老板禁止内联造型。

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

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

<svg>-element

无效，因为它不是<img>-element。

所以你看到我没有提出这些要求，因为我想让它变得复杂但是由于我正在和我一起工作的环境。

Answer 1

虽然它可能仍然没有满足所有约束（我仍然认为不清楚它们究竟适用于哪里......因为我不知道有问题的系统），因为OP要求演示，我们在这里：

我认为只有所包含的图像受到限制
我认为该形状在网站或CSS中可能是静态的
然后我们只是使用定位来堆叠彼此的东西

＆＃13;

div.inline{
  display:inline-block;
  width:100px;
  height:100px;
  position: relative;
}
#image{
  background-image:url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%22100%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%22100%22%3E%0A%3Ccircle%20r%3D%2240%22%20stroke%3D%22red%22%20cy%3D%2250%22%20cx%3D%2250%22%20fill%3D%22transparent%22/%3E%0A%3C/svg%3E%0A');
}
#imagebase64{
  background-image:url('data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8c3ZnIHdpZHRoPSIxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgaGVpZ2h0PSIxMDAiPg0KPGNpcmNsZSByPSI0MCIgc3Ryb2tlPSJyZWQiIGN5PSI1MCIgY3g9IjUwIiBmaWxsPSJ0cmFuc3BhcmVudCIvPg0KPC9zdmc+');
}
.relative{
  position: absolute;
  top:0;
  left:0;
}

＆＃13;

<!doctype html>
<html><head><title>How to include SVG demo: inline, css, data-url …</title></head><body>

  <div class="inline" id="image">
    <span class="relative" style="top:30%;left:1ex;font-size:20px;">&nbsp;data-url<br>CSS:SVG</span>
  </div>
  <div class="inline" id="imagebase64">
    <span class="relative" style="top:30%;left:1ex;font-size:20px;">&nbsp;data-url<br>CSS:B64</span>
  </div>
  <div class="inline">
    <span class="relative" style="top:30%;left:1ex;font-size:20px;">&nbsp;inline SVG/XML</span>
    <svg height="100" width="100">
      <circle cx="50" cy="50" r="40" stroke="red" stroke-width="1" fill="transparent" />
    </svg>
  </div>

<!-- did not work without version etc. here -->
  <div class="inline">
    <img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%20width%3D%22100%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%22100%22%3E%0A%3Ccircle%20r%3D%2240%22%20stroke%3D%22red%22%20cy%3D%2250%22%20cx%3D%2250%22%20fill%3D%22transparent%22/%3E%0A%3C/svg%3E%0A" width="100" height="100" />
    <span class="relative" style="top:30%;left:1ex;font-size:20px;">&nbsp;data-url<br>IMG/SVG<br></span>
  </div>

<div class="clear"></div>

  <div class="inline"><!-- 1st layer -->
    <img src="https://img.clipartfest.com/5e18aeec4df9d62fe5cb5e198e4c56c8_locked-padlock-lock-icon-lock-and-key-clipart-transparent-background_420-420.png" width="100" height="100" />
    <div class="relative"><!-- 2nd layer on top -->
      <svg height="100" width="100">
        <circle cx="50" cy="50" r="49" stroke="red" stroke-width="3" fill="transparent" />
      </svg>
    </div>
  </div>

<!-- final symbol with SVG hexagon -->
<div class="inline">
  <img src="https://img.clipartfest.com/5e18aeec4df9d62fe5cb5e198e4c56c8_locked-padlock-lock-icon-lock-and-key-clipart-transparent-background_420-420.png" width="100" height="100" />
  <div class="relative">
    <!-- viewBox does the scaling -->
    <svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100" viewBox="0 0 300 300" xmlns:xlink="http://www.w3.org/1999/xlink">
      <polygon class="hex" points="299,150 225,280 75,280 1,150 75,20 225,20" stroke="red" stroke-width="9" fill="transparent"></polygon>
    </svg>
  </div>
</div>

</body></html>

＆＃13;

svg inline的不同方法，作为数据url内联，仅作为css中的数据url（可以通过样式属性内联）和base64（我不建议svg更长，但png / jpg / gif等）< / LI>
也是图像顶部的最终示例svg，具有所需的边框形状。

工具/链接

svg playground：https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_circle
svg minifyer：http://www.svgminify.com/
也可以不使用base64：https://css-tricks.com/probably-dont-base64-svg/ - 只需编码特殊字符
用于网址编码：http://yoksel.github.io/url-encoder/替代：https://codepen.io/sophtwhere/pen/QKyokk

Answer 2

我在网上发现了这个解决方案，我不是autor（作者是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>

工作小提琴： https://jsfiddle.net/9znph3sb/

具有图像和边框的跨浏览器兼容的六边形形状（没有SVG或背景图像）

2 个答案: