Hexagon + Border-radius + Background-image，我该怎么做？答案

【问题标题】：Hexagon + Border-radius + Background-image, how can i do this?Hexagon + Border-radius + Background-image，我该怎么做？
【发布时间】：2016-08-25 12:18:43
【问题描述】：

我有一个问题要问你。例如，我得到了this picture，需要用某人的照片在它上面做背景图像宽度框阴影（黄色）（没关系）。我怎样才能做到正确？

*更新图片！

【问题讨论】：

stackoverflow.com/questions/36828769/…
带有 ::before 和 ::after 的照片背景怎么样？我看到了你的实现。

标签： html css svg background-image box-shadow

【解决方案1】：

这样的任务最好使用 SVG 来完成，因为它允许您定义复杂的形状。

<svg viewBox="0 0 120 100" style="width:120px;height:100px">
  <defs>
    <clipPath id="hexagon_clip">
      <path id="hexagon" d="M38,2 
           L82,2 
           A12,12 0 0,1 94,10 
           L112,44 
           A12,12 0 0,1 112,56
           L94,90       
           A12,12 0 0,1 82,98
           L38,98
           A12,12 0 0,1 26,90
           L8,56
           A12,12 0 0,1 8,44
           L26,10
           A12,12 0 0,1 38,2" />
      <!-- SVG Hexagon path from http://stackoverflow.com/a/36842587/507674 -->
    </clipPath>
  </defs>
  <image xlink:href="http://placehold.it/120x100" x="0" y="0" width="120px" height="100px" clip-path="url(#hexagon_clip)" />
  <use xlink:href="#hexagon" x="0" y="0" stroke="orange" stroke-width="5" fill="transparent" />
</svg>

这里发生的是为六边形定义剪切路径，然后将其应用于图像。最后，在顶部再次绘制六边形以制作边框。

【讨论】：

谢谢。但我看到了这个：i.imgur.com/29ERbF6.png - 这是因为我的身体有风格 - 颜色：#333 它有什么问题？
嗯...如果去掉<use ... />这一行，图片会出现吗？
是的，图片出现了。
我发现我的遗漏 - * transition: all 0.3s (删除这个解决问题)