在所有现代浏览器中都可以使用 CSS 进行屏蔽吗？答案

【问题标题】：Is this masking possible with CSS in all modern browsers?在所有现代浏览器中都可以使用 CSS 进行屏蔽吗？
【发布时间】：2015-12-27 09:30:29
【问题描述】：

是否可以只用一张图片和一些 CSS 来创建这个 html 元素？
可以选择使用 SVG 对象或一些额外的 div。
这适用于所有现代浏览器，包括 IE/Edge。
有什么建议吗？
或者这对于 IE/Edge 根本不可能，我应该为“箭头”使用透明图像吗？

【问题讨论】：

听起来不像：caniuse.com/#feat=css-masks
谢谢罗伯特。我确实看过那里，但也许我错过了另一种方法。所以也许我应该改写我的问题？
@Robert，我在 IE 中尝试了bennettfeely.com/clippy，但这也不起作用...
@RobertLongson 你有例子吗？

标签： html css svg polygon mask

【解决方案1】：

使用 SVG 可能是目前最兼容的解决方案。有可能使用 css 中引用的基于 svg 的剪辑路径，但支持有点差（可能仅在 FF 中）。

下面是一个适用于 IE9+、Edge、最新的 Chrome、FF 和 Opera 的示例。

http://jsbin.com/lurowa/1/edit?html,css,js,output

<div class="background">
  <svg width="250" height="141" viewPort="0 0 250 141" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="clipping">
        <polygon points="3 3, 220 3, 220 60, 240 60, 220 79, 220 138, 3 138"/>
      </clipPath>
    </defs>
    <image x="6" y="6" clip-path="url(#clipping)" width="250" height="141" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4gxYSUNDX1BST0ZJTEUAAQEAAAxITGlu ... AOOlUuZ7GMaji3Y//9k="/>
    <polygon stroke="white" fill="none" stroke-width="6" points="3 3, 220 3, 220 60, 240 60, 220 79, 220 138, 3 138"/>
  </svg>
</div>

【讨论】：

哇，你是（狮子）王！谢谢！
是否也可以做到这一点？还是我什至不应该调查？只是一个提示会很好！
如果您的意思是它适合许多不同的图像尺寸和不同的笔划宽度，您可以创建一个将 svg 生成为字符串的函数。在此函数中，您可以用变量替换任何数字。这是你的意图吗？
听起来很有希望！我会去的。