各种Android版本上的Unicode箭头

Question

我使用以下HTML / CSS代码，用于创建＆＃34; Play＆＃34;按钮。该代码使用▶和＆amp; 9658;创造典型的＆＃34; Play＆＃34;按钮箭头。

<div class='audio-container'>
<p style="text-indent:0em;">
  <audio preload='none' controls></audio>
<a class="media-link"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="vertical-align:middle;" height="62px" width="1px" /><span style="background-color:black;border:none;text-align:center;color:white!important;padding: 7px 20px 9px 25px;border-radius:10px;display:inline;!important;">&#9654;&emsp;Listen 9654&emsp;</span>
</a>
</p>
</div>

<div class='audio-container'>
<p style="text-indent:0em;">
  <audio preload='none' controls></audio>
<a class="media-link"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" style="vertical-align:middle;" height="62px" width="1px" /><span style="background-color:black;border:none;text-align:center;color:white!important;padding: 7px 20px 9px 25px;border-radius:10px;display:inline;!important;">&#9658;&emsp;Listen 9658&emsp;</span>
</a>
</p>
</div>

我遇到的问题是箭头在不同版本的Android上显示的方式不同，如下图所示。

我想要的是纯白色（不带阴影的灰色）版本＆amp;＃9654;但是，在Android 7上渲染时，＆amp;＃9654会在较低版本的Android上呈现灰色。

＆安培;＃9658;在较低版本的Android上看起来很棒，但在Android 7设备上显得比较模糊。

我似乎无法找到正确的HTML / CSS代码组合来获得＆＃34; Play＆＃34;箭头在所有Android版本上都显示一致。

Answer 1

纯css方式怎么样？

您可以使用块的边框创建带有小技巧的三角形。 它随处可见，您将始终获得相同的结果。

检查此代码段以了解其工作原理。

/* For styling purpose */
body {
  font-family: sans-serif;
}

.block-with-width-and-height {
  width: 20px;
  height: 20px;
  border-style: solid;
  border-width: 20px 20px 20px 20px;
  border-color: red orange green blue;
}

.block-without-width-and-height {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 20px 20px;
  border-color: red orange green blue;
}

.triangle-almost-done {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 20px 20px;
  border-color: transparent transparent green transparent;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 20px;
  border-color: transparent transparent green transparent;
}

.container {
  background: #ccc;
  display: inline-block;
}

/* THERE IS THE CODE YOU NEED */
.media-link {
  display: inline-flex;
  align-items: center;
  background: black;
  color: white;
  font-family: sans-serif;
  padding: 10px 20px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .3s;
}

.media-link::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #fff;
  margin-right: 10px;
 }
 
 .media-link:hover{
  background: #464646;
 }

<p>
  If you apply different color for each border of a block that has a width and a  height you can see that the border are beveled.
</p>
<div class="block-with-width-and-height"></div>

<p>
  What happen if we remove the width and the height ?
  The border are still displaying and are making 4 little triangles
</p>
<div class="block-without-width-and-height"></div>
<p>
  So now we can play with it !
  Make 3 border transparent, and we get one triangle; but this is not over to be   perfect.
</p>
<div class="container">
  <div class="triangle-almost-done"></div>
</div>

<p>
  As you can see, there is a margin above the triangle. This is the transparent     top border. Can we set its width to 0 ? Yes, and thanks to that, the top margin will be removed.
</p>
<div class="container">
  <div class="triangle"></div>
</div>

<p> And here is your button with a triangle ! We only need your <strong>"a"</strong> tag and a <strong>before</strong> pseudo element to create the triangle.
</p>
<p>
<a class="media-link">
  Listen 9654
</a>
</p>

您可以使用生成器轻松完成此操作：

http://apps.eky.hk/css-triangle-generator/