Html 在所有现代浏览器中，CSS都可以实现这种屏蔽吗？

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

---

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

下面是一个在IE9+、Edge、最新Chrome、FF和Opera中工作的示例

听起来好像没有，谢谢，罗伯特。我确实看了，但也许我错过了另一种方法。所以也许我应该重新表述我的问题？@Robert，我试过IE，但也没用…@RobertLongson你有没有机会举个例子？哇，你是（狮子）王！谢谢有可能也这样做吗？或者我甚至不应该调查这件事？只要一个提示就好了！如果您的意思是它将适合许多不同的图像大小和不同的笔划宽度，那么可以创建一个函数，将svg生成为字符串。在此函数中，您可以用变量替换任何数字。这是你的意图吗？听起来很有希望！我要试一试。

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