如何在CSS中对图像进行切片

Question

我想使用 CSS 对 html 文档中的图像进行切片。

这是我想要对图像进行切片的方式。我用红色掩盖了它：

<div class="img_section" >
  <img src="http://i62.tinypic.com/1zbcqhg.jpg"  alt="sliced-image" >
</div>

我不想使用遮罩层来隐藏图像，因为文档的背景不是纯色。我使用 border-radius 属性来做到这一点，但我做不到。如果 CSS 无法实现，那么 js 也不能实现吗？

Answer 1

您可以使用 来剪辑图像并svg导入html 中的 html ，因为您只能应用于一个元素。clipPathforeignObjectsvgsvg clipPathsvg

<svg width="445" height="257">
  <clipPath id="clip">
    <path d="M0,0 h444 l-130,257 h-314z" />
  </clipPath>
  <foreignObject clip-path="url(#clip)" width="445" height="257">
    <div class="img_section">
      <img src="http://i62.tinypic.com/1zbcqhg.jpg" alt="sliced-image" />
    </div>
  </foreignObject>
</svg>