图像标签的CSS三角形[重复]答案

【问题标题】：CSS triangle for image tag [duplicate]图像标签的CSS三角形[重复]
【发布时间】：2014-08-29 08:05:57
【问题描述】：

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

.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;
}

【问题讨论】：

尝试将<img> 标签设置为display:block;。告诉我进展如何。
jsfiddle.net/hyH48/2132 它对我有用，仅在 Firefox 中。
谢谢，我需要一个跨浏览器解决方案
你需要 jquery stackoverflow.com/questions/5843035/…
好的，尝试通过我给你的解决方案使 CSS 适应其他浏览器。或者选择另一个更全球化的解决方案。（第二种选择更好）。祝朋友好运！ ;)

标签： html css

【解决方案1】：

你不能使用伪元素与图像标签检查here

您必须使用例如div 元素来包装您的图像，并在该元素上设置伪元素。

【讨论】：

我无法换行图像。图片是地图上的标记，地图 API 只接受图片作为标记，不接受 HTML。
@Ludovic 如果您真的无法更改 HTML，您可以尝试使用 jQuery 将图像包装在 div 标签中
在我看来您需要一张新图片……仅此而已。
@Ludovic 我认为 Paulie_D 是对的，最简单的解决方案是直接在图像中实现三角形
是的，我同意我需要一张图片，但图片会动态发送到地图（它是用户头像）。我会要求设计师改变他的设计:)

【解决方案2】：

请查看此答案：click here

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

【讨论】：