CSS 手机上的 ::before 问题

Question

我在使用 ::before 时遇到了一个小问题...我在我的 div 内容之前添加了小三角形以使其更花哨，我有动画背景并且我发现在低分辨率下（特别是phones) 有一些奇怪的线条我无法摆脱。

这是我的代码

#thirdScreen::before{
  content: "";
  position: absolute;
  border-style: solid;
  border-width: 50px 90vw 0 10vw;
  border-color: transparent #E3E3E3 ;
  background-attachment: fixed;
  background-image: url(https://media.giphy.com/media/kW6O6ozGQnqzm/giphy.gif);
  background-size: contain;
}

这是我在检查它时看到的 phone:
inspect with Galaxy S5 360x640

这是一个代码笔：
https://codepen.io/anon/pen/bWmWEL

如果有人能告诉我我能用它做什么会很有帮助。
谢谢！

Answer 1

这是关于渲染的。您在 ::before 中创建的三角形将您的部分悬停在距离顶部相同的像素上，在某些分辨率下您可能会看到一个像素的差异，这就是为什么有边框的原因。解决方案是简单地添加 margin-top: -1px;

#secondScreen::before {
    margin-top: -1px;
}

CSS 手机上的 ::before 问题

CSS issue with ::before on phones

html

css

pseudo-class

pseudo-element

web