1

我试图为移动浏览器制作一个特殊形状的标题。
我在我的电脑上使用 :before 和 :after 得到了我想要的三角形形状。虽然它在 PC 浏览器中看起来很棒......到目前为止，只有我的三星 Galaxy s2 和 s4 上的 chrome 浏览器给出了预期的效果。甚至三星的标准浏览器也失败了。
我还在 iphone s4 上对其进行了测试，但在 safari 和 chrome 中都没有成功。

在我找到的所有支持这些伪选择器的页面上，他们都声明每个浏览器都支持，但我的测试表明并非如此。

我的问题是，没有支持还是我的代码有误？

这是一个简单页面的链接，其中包含我设置的代码。 http://foodlogg.net76.net/pseudo.html

*{
  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;
}

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

4

2 回答 2

1

这个问题与伪元素无关。

这是关于 CSS3 相对大小的vw. 您的伪元素具有 vw 中给出的样式部分的宽度或边框宽度。这就是移动浏览器卡住的原因。

Android（就像在你的 Galaxies 上）从 4.4 开始就支持这个。

于 2015-06-23T09:48:00.420 回答
0

你可以试试这个：display: table-cell在类中添加 arrtibute.top:after和.top:before. 我认为它成功了。

于 2019-10-21T03:52:52.407 回答