Question

我遇到半透明块的问题。主要问题是“块”元素与其伪元素（之前）之间的细线。这个问题出现在每个现代桌面浏览器中（Opera，Firefox，Chrome。虽然不了解Safari）。代码如下：

HTML：

<div class="block"></div>

CSS：

.block{
  position: relative;
  width: 200px;
  height: 200px;
  margin-left: 100px;
  background-color: rgba(0, 0, 0, 0.5);
  transform: skewX(-21deg);
}
.block:before{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 100px;
  height:200px;
  background-color: rgba(0, 0, 0, 0.5);
}

关于jsfiddle的例子： https://jsfiddle.net/Farmatique/xw877edw/

即使我将背景颜色不透明度设置为1，此问题仍然存在。

任何帮助/建议表示赞赏。

Answer 1

您遇到的问题是由于倾斜元素的anti-aliased边缘。浏览器正在尽最大努力用像素绘制光滑，有角度的边缘，并且它使用您指定的背景颜色的各种更浅，更透明的阴影，以给出平滑边缘的错觉。你看到的“线”是更轻，更透明的像素，它允许文件的白色背景照射下来。

通过CSS方法，您可以尝试使用box-shadow上的微妙:before属性来欺骗用户的眼睛，以消除抗锯齿边缘：

    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

如果需要，调整不透明度以查看是否可以找到有效的最佳位置。

另一个想法可能是尝试除白色之外的其他颜色，作为偏斜元素背后的背景，以淡化透过的东西。

然而，这里需要注意的是，每个设备都有自己的背景和阴影所选颜色的表示，对于某些设备来说会更明显，而对其他设备则更为明显。

Answer 2

更好的解决方案......

您遇到的问题是由于倾斜元素的anti-aliased边缘彼此相邻。浏览器正在尽最大努力用像素绘制光滑，有角度的边缘，并且它使用您指定的背景颜色的各种更浅，更透明的阴影，以给出平滑边缘的错觉。你看到的“线”是更轻，更透明的像素，它允许文件的白色背景照射下来。

不是为background-color伪元素分配:before，而是将right-border分配给.block类，如下所示：

    .block{
      position: relative;
      width: 200px;
      height: 200px;
      margin-left: 100px;
      background-color: rgba(0, 0, 0, 0.5);
      transform: skewX(-21deg);
      border-right-width: 100px;
      border-right-style: solid;
      border-right-color: transparent;
    }

    .block:before{
      content: 'I\'m in the pseudo element';
      display: block;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 100%;
      width: 100px;
      height:200px;
    }

由于边框是.block div元素的一部分，因此形状之间不再存在间隙，并且您的:before伪元素将出现在边框区域上，就好像它一样有自己的背景颜色。

没有更多的话。

相邻的，倾斜的块之间的细线，具有透明度

2 个答案: