像▶這樣的三角形實體無法在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中正確顯示

回答

相關問題