Question

我正在尝试在圆角的六边形内创建一个图像，其中该图像将充当较长六边形的标题以显示个人资料/传记信息。六边形也有边框。

我已经研究过了，虽然我能找到如何将图像放在六边形中的方法，以及如何制作像它一样的圆形角形六角形（这是我想要的形状除了它的旋转）http://codepen.io/thebabydino/details/gFxzt我似乎无法将这两个概念合并在一起，可能是因为它们不同。
是的，请有人帮助我。

这是我到目前为止所提出的并不是我想要的。

-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

这是my jsfiddle。

响应能力的奖励积分。

Answer 1

如果您的图像具有固定的背景颜色，您可以使用此笔，它是一个二十六边形的叉子：

http://codepen.io/rafaelcastrocouto/pen/mAPjRP

如果不是，您可以使用SVG路径

http://codepen.io/rafaelcastrocouto/pen/vXGamL

＆＃13;

.clip-polygon {
  -webkit-clip-path: url("#hex");
  clip-path: url("#hex");
}

＆＃13;

<div class="clip-wrap">
  <img src="https://placeholdit.imgix.net/~text?txtsize=30&bg=ff6347&txtclr=ffffff&txt=Image&w=140&h=140" alt="demo-clip-path" width="140" height="140" class="clip-polygon">
</div>

<svg height="0" width="0">
  <defs>
    <clipPath id="hex">
      <path d="M59 2.8867513459481a10 10 0 0 1 10 0l45.425625842204 26.226497308104a10 10 0 0 1 5 8.6602540378444l0 52.452994616207a10 10 0 0 1 -5 8.6602540378444l-45.425625842204 26.226497308104a10 10 0 0 1 -10 0l-45.425625842204 -26.226497308104a10 10 0 0 1 -5 -8.6602540378444l0 -52.452994616207a10 10 0 0 1 5 -8.6602540378444"></path>
    </clipPath>
  </defs>
</svg>

＆＃13;

图像采用圆角六边形

1 个答案: