html - 具有透明度的相邻倾斜 block 之间奇怪的细线

Question

我对半透明 block 有疑问。主要问题是“ block ”元素和它的伪元素(之前)之间的细线。这个问题出现在每个现代桌面浏览器中(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 引起的倾斜元素的边缘并排放置。浏览器正在尽最大努力用像素绘制平滑、 Angular 边缘，并且它使用您指定的背景颜色的各种、更浅、更透明的阴影，以产生平滑边缘的错觉。您看到的“线”是更亮、更透明的像素，它们允许下方文档的白色背景透过。

而不是分配 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伪元素将出现在边框区域上，就好像它有自己的背景色一样。

没有更多的行。