Question

我对你有疑问。例如，我得到this picture，并且需要在它上面做背景图像宽度框阴影（黄色）和某人的照片（无关紧要）。我该怎么办呢？

*更新图片！

Answer 1

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

＆＃13;

<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>

＆＃13;

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

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

1 个答案: