带有图像的CSS3多边形，如何？

【问题标题】：CSS3 polygons with images, how to?带有图像的CSS3多边形，如何？
【发布时间】：2018-10-31 09:04:26
【问题描述】：

如何使用每个块内的图像来制作这种形状？每个块将有 100% 的宽度。看例子：

我这里有多边形，但我怎样才能使它 100% 的 svg 和完整的图像背景而不会丢失纵横比？

`https://jsfiddle.net/acrr120/t9y950qy/`

【问题讨论】：

您需要了解 UI 上的点 (x,y) 位置才能进行自定义形状，请参阅w3schools.com/graphics/svg_polygon.asp 快速参考
我已经完成了多边形，但是我怎样才能让它充满呢？并且图像 100% 不丢失部分？

标签： css svg polygon shape polygons

【解决方案1】：

只需将您的svg 包装在一个容器中并提供您想要的height 并同时提供overflow:hidden 通过这种方式您将定义您想要的高度并尊重 svg

的比例

.container {
  height: 500px;
  overflow: hidden;
}

<div class="container">
    <svg width="100%" viewBox="0 0 100 100" style="border:1px solid red">
      <polygon points="0,0 30,10 100,10 100,100 0,100" fill="red" />
    </svg>
</div>

【讨论】：

我怎样才能在不丢失宽高比的情况下使用完整的图像背景？