Html 用于图像标记的CSS三角形

我正在寻找一种方法来添加一个带有img html标记的边框三角形（带有透明提示）。 它可以使用div，但不能使用图像标记

---

不能在图像标记检查中使用伪元素

---

您必须使用例如

div

元素包装图像，并在该元素上设置伪元素。

请检查以下答案：

---

大多数浏览器不支持在img标记上使用：after或：before。

尝试将

标记设置为

display:block。告诉我进展如何。它只在Firefox tho中对我有效。谢谢，我需要一个跨浏览器解决方案。你需要jquery。好的，试着根据我给你的解决方案将CSS调整到其他浏览器。或者选择另一个更全球化的解决方案。（第二种选择更好）。祝你好运，朋友我无法包装图像。图像是地图上的一个标记，地图API只接受标记的图像而不接受HTML。@Ludovic如果你真的无法将HTML标记更改为我，你可以尝试使用jQuery将图像包装在div标记中，你需要一个新图像……仅此而已。@Ludovic我认为Paulie_D是对的，最简单的解决方案是直接在图像中实现三角形是的，我同意我需要图像，但图像会动态发送到地图（它是用户的化身）。我会让设计师改变他的设计：）
.mybox {
    width:200px;   
    height:100px;
    position:relative;
    border: 5px solid red;
}

.mybox:after, .mybox:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.mybox:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: red;
    border-width: 30px;
    margin-left: -30px;
}
.mybox:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: red;
    border-width: 36px;
    margin-left: -36px;
}