CSS 在所有现代浏览器中都可以使用这种屏蔽吗？

Question

是否可以仅使用图像和一些 CSS 创建此 html 元素？
可选择使用 SVG 对象或一些额外的 div。
这适用于所有现代浏览器，包括 IE/Edge.
有什么建议吗？
还是 IE/Edge 根本不可能，我应该为 'arrow' 使用透明图像吗？

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

CSS 在所有现代浏览器中都可以使用这种屏蔽吗？

Is this masking possible with CSS in all modern browsers?

html

css

svg

polygon

mask