CSS 列隐藏 ::before 元素，其绝对位置扩展了他自己的列

Question

在我的网站上，我有由伪元素 :before 的边框组成的三角形。我的问题是，如果我将这些三角形添加到列 (column-count) 中的元素，则不是第一列中的三角形会隐藏在前一列中。列已设置 column-gap。我试过 z-index: 还是不行。

Fiddle: http://jsfiddle.net/aq9Laaew/208715/

    .masonry{
      column-count: 3;
      column-gap: 1.5em;
    }
    
    .child {
      height: 400px;
      background: #EEE;
    }
    
    span{
      left: -20px;
      position: absolute;
      z-index: 2;
    }
    
    span:before{
      content: "";
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 1.5em .5em;
        border-color: transparent transparent #D36135 transparent;
        z-index: 2;
    }

<div class="container">
<div class="masonry p-1">
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
</div>
</div>

Answer 1

不确定你想要什么，但如果你想要列前的所有三角形，那么我已经做了一些调整。我已将所有跨度从 h1 移动到父级 div (.child) 并添加 position:relative; .child class.

你也可以在这里查看.. http://jsfiddle.net/aq9Laaew/208868/

.masonry{
  column-count: 3;
  column-gap: 1.5em;
}
.child {
  height: 400px;
  background: #EEE;
  position:relative;
  z-index:1;
  margin-left:20px;
}

span{
  margin-left: -32px;
}
span:before{
  content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 3em 2em;
    border-color: transparent transparent #D36135 transparent;
    z-index: 2;
}

<div class="container">
<div class="masonry p-1">
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
  <div class="child"><span></span>
  <h1 class="position-relative">h1</h1>
  </div>
</div>
</div>

Answer 2

使用h1{position:relative;}和.child {margin-left:20px;}

.masonry{
  column-count: 3;
  column-gap: 1.5em;
}

.child {
  height: 400px;
  background: #EEE;
  margin-left:20px;
}

span{
  left: -20px;
  position: absolute;
  z-index: 2;
}
.position-relative{
position:relative;
}

span:before{
  content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 1.5em .5em;
    border-color: transparent transparent #D36135 transparent;
    z-index: 2;
}

<div class="container">
<div class="masonry p-1">
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
  <div class="child">
  <h1 class="position-relative">h1<span></span></h1>
  </div>
</div>
</div>

Answer 3

您可以使用边距代替 column-gap，并在容器上设置负边距以对齐左侧：

.container{
  overflow:hidden;
}
.masonry{
  column-count: 3;
  column-gap: 0;
  margin-left:-0.75rem;
}

.child {
  height: 400px;
  background: #EEE;
  margin-left:1.5rem;
}

Answer 4

只需添加到 .child 这个 css:

-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
backface-visibility: hidden;

http://jsfiddle.net/aq9Laaew/208715/

<div class="container">
  <div class="masonry p-1">
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
    <div class="child">
      <h1 class="position-relative">h1<span></span></h1>
    </div>
  </div>
</div>

.masonry{
   column-count: 3;
   column-gap: 1.5em;
 }

.child {
   height: 400px;
   background: #EEE;
  -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
   page-break-inside: avoid; /* Firefox */
   break-inside: avoid; /* IE 10+ */
   backface-visibility: hidden;
}

span{
   left: -20px;
   position: absolute;
   z-index: 2;
}

span:before{
   content: "";
   display: inline-block;
   width: 0;
   height: 0;
   border-style: solid;
   border-width: 0 0 1.5em .5em;
   border-color: transparent transparent #D36135 transparent;
   z-index: 2;
}

CSS 列隐藏 ::before 元素，其绝对位置扩展了他自己的列

CSS columns hide ::before element with absolute position extending his own column

html

css

pseudo-element

css-multicolumn-layout