Css ：之后和：之前不在移动浏览器上工作

我正在尝试为手机浏览器制作一个具有特殊形状的标题。
我在电脑上用：before和：after得到了我想要的三角形。 虽然它在pc浏览器中看起来很棒。。到目前为止，只有我的三星Galaxy s2和s4上的chrome浏览器达到了预期效果。甚至三星的标准浏览器也失败了。
我还在iphone s4上进行了测试，在safari和chrome上都没有成功。

在我找到的关于支持这些伪选择器的所有页面上，它们都声明每个浏览器都支持，但我的测试表明不是这样

我的问题是，是否没有支持或我的代码是错误的

下面是一个链接，指向一个简单的页面，其中包含我设置的代码。

---

希望你们能帮我解决这个问题。

这个问题与伪元素无关

这是关于CSS3与

vw

的相对大小。 您的伪元素具有vw中给定的样式部分的宽度或边框宽度。这就是为什么手机浏览器出现了问题

---

Android（就像在你的星系上一样）只支持4.4以上的版本。

你可以试试这个：在类

中添加arrtibute
显示：表格单元格
。top:after

和

。top:before

。

---

我认为它成功了。

尝试缩短链接时出错“此goo.gl短链接已被禁用。发现它违反了我们的服务条款。单击此处和此处分别了解有关我们条款和策略的更多信息”注意，您现在应该使用双冒号而不是单冒号：不要混淆您的URL；直接链接到相关页面。link已经更新@Rob我在我的原始代码中使用了它们，只是没有将其包含在我在这里发布的问题片段中。它在链接页面上使用，有人吗？以下是指向其使用的完整网站的链接：

*{
  margin: 0px;
  padding: 0px;
}
.top {
  background-color:#e50000;
  height:20px;
  width: 93vw;
  text-align: left;
  padding: 5px 0px;
}
.top:before {
  content: '';
  width: 0;
  height: 0;
  border-bottom: 20px solid transparent;
  border-left: 93vw solid #e50000;
  position: absolute;
  left: 0px;
  top: 30px;
}
.top:after{
  content: '';
  width: 0;
  height: 0;
  border-top: 0px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 7vw solid #e50000;
  position: absolute;
  right: 0px;
  top: 0px;
}