具有非父文本的透明CSS hexagon，在android中不会出现渲染问题

我正试图找到一种解决方案，在android或其他浏览器中显示一个透明的六边形，该六边形是用CSS创建的，上面是非透明文本，而不会出现渲染问题

我不想使用

svg

或

png

，而是想得到这样的结果

我最终得到的是一个透明的六边形和透明的文本，或者是一个具有奇怪透明效果的六边形

我现在尝试的一切：

问题：android和chrome中的渲染问题。当显示在my phone或chrome responsive view上时，hexagon具有这些细线。

问题：我尝试了答案中显示的第一个六边形的代码，它在android中存在相同的渲染问题。使用

rgba（）

显示的第二个六边形代码创建了一个外观怪异的六边形，您可以在其中看到六边形的裸露部分（如下图所示）。通过使用

opacity

文本也将是透明的。
这是一把小提琴，用来演奏外形怪异的六边形

---

混合模式和全彩可能是一个提示@GCyrillus你在小提琴上试过这个吗？因为六边形是不透明的。你需要用chrome或firefox来测试这一点，它还不适用于IE（请参阅（我通常不会浪费时间发布不工作的fiddle，但在评论中，我不介意发布还不适用于所有地方的CSS…以避免嘿，它不工作；）另一个例子是我的安卓手机的屏幕截图：如果你还想知道它是否有效；）谢谢你的努力，但我认为

mix-blend-mode

无法正确完成这项工作。特别是当背景图像发生变化时，混合效果会变得非常怪异。我想我必须使用

svg

或

png

来解决这个问题，直到android中的渲染问题得到解决。全色混合模式可能是一个提示@GCyrillus你在小提琴中尝试过吗？因为六边形是不透明的。你需要用chrome或firefox来测试这一点，它还不适用于IE（请参阅（我通常不会浪费时间发布不工作的fiddle，但在评论中，我不介意发布还不适用于所有地方的CSS…以避免嘿，它不工作；）另一个例子是我的安卓手机的屏幕截图：如果你还想知道它是否有效；）谢谢你的努力，但我认为

mix-blend-mode

无法正确完成这项工作。特别是当背景图像发生变化时，混合效果会变得非常怪异。我想我必须使用

svg

或

png

来解决这个问题，直到android中的渲染问题得到解决。