带图像的多边形

Question

我正在尝试与 CSS 一起做一些形状

如何使用里面的图像制作这些形状？

Answer 1

以下是一种方法：

• inline svg
• pattern element
• polygon element

svg {
  display: block;
  background: lightgrey;
}

<svg viewbox="0 0 10 6.1">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="6" height="4">
      <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" width="6" height="4" />
    </pattern>
  </defs>
  <g fill="url(#img)" stroke-width="0.1" stroke="lightgrey">
    <polygon points="0.3 0.3 5.5 0.3 3.4 3.1 0.3 3.1" />
    <polygon points="0.3 3.3 5.6 3.3 7.5 5.8 0.3 5.8" />
    <polygon points="5.7 0.3 4.65 1.75 7.7 5.8 9.7 5.8 9.7 0.3" />
    <polygon points="4.52 1.85 5.5 3.15 3.6 3.15" />
  </g>
</svg>