在所有现代浏览器中，这种屏蔽是否可以用于CSS？

Question

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

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>