像▶这样的三角形实体无法在Safari中正确显示

我打算在我的网站中使用三角形实体▶和◀来表示箭头。 Chrome OSX在仿真模式下显示正常。像▶这样的三角形实体无法在Safari中正确显示

桌面：

不过，这并不正确，在移动端显示。

移动：

这是某种形式的默认设置的？我该如何修改？

来源

2015-09-07 Jason Lam

我希望这是一个股票形象，你实际上不是在应用程序/网站上销售拖放小猫。 – ScottMcGready

可能是媒体查询问题 –

如果您使用HTML代码或Unicode十六进制箭头，不同的浏览器解释不同的代码类型，他们有不同的默认设置，所以可能最好的方式来使它工作可能是使用图像。

来源

2015-09-07 03:51:12 Dario

我总是用CSS在需要时创建纯色三角形：

div.triangle { 
 
    position: relative; 
 
} 
 
div.triangle::after { 
 
    content: ""; 
 
    width: 0; 
 
    height: 0; 
 
    border-width: 10px; 
 
    border-color: transparent red transparent transparent; 
 
    border-style: solid; 
 
    left: 0; 
 
    top: 0; 
 
    position: absolute; 
 
}

<div> 
 
    <div class="triangle"></div> 
 
</div>

只需使用更多的CSS三角形格将根据您的要求。

来源

2015-09-14 15:49:23

我知道这种解决方案。但在这种情况下，我需要在三角形上应用一个方块阴影。 CSS三角形将有方形阴影，这只是奇怪的。 –

像▶这样的三角形实体无法在Safari中正确显示

回答

相关问题