在前任的:: after之后的transformY之后删除多余的填充

Question

（哇，这是一个糟糕的头衔！）

我在div后面创建了一个小四分圆。然后我使用transformY将它移回div，以便某些内容重叠，这是用户的设计要求。

然而，这样做会在div的底部留下一些多余的空间...... div在转换后保留了整个高度。我想降低那个高度。

我正在使用页面构建器（ClickFunnels）。这是链接：https://www.goupperpeninsula.com/get-your-arts-on

这是CSS：

#section-1852710000::after,
#section-1852710000::before {
    content: '';
    position: relative;    
    display: block;
    background: #ffe121;  
    width: 285px;
    height: 285px;
}

#section-1852710000::after {
    border-top-right-radius: 285px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

这是我想要消除的空间：

我觉得我错过了一些明显的东西，我只是不太确定它是什么！

Answer 1

这是预期的。 transform纯粹是视觉效果，不会影响布局。我会尝试使用负边距。

以下是我保留的不同行为的演示。

* {
  box-sizing: border-box;
}

h3 {
  text-align: center;
}

.page {
  margin: 0 auto;
  text-align: center;
}

.wrapper {
  border: 5px solid black;
  margin: 5px;
  display: inline-block;
  background: lightblue;
  vertical-align: top;
}

.box {
  width: 100px;
  height: 350px;
  background: lightgrey;
  border: 1px solid grey;
  padding: 10px;
  text-align: center;
}

.position {
  position: relative;
  top: -25px;
}

.margin {
  margin-top: -25px;
}

.transform {
  transform: translateY(-25px);
}

<h3>DEMONSTRATING THE DIFFERENCE BETWEEN RELATIVE POSITIONING AND POSITIVE/NEGATIVE MARGINS AND TRANSFORMS</h3>

<div class="page">

  <div class="wrapper">

    <div class="box">
      <p>This box is the specimen for comparison purposes.</p>
      <p>It is a grey box inside a blue box with a black border.</p>
    </div>
  </div>

  <div class="wrapper">
    <div class="box position">
      <p>This grey box is moved using relative positioning.</p>

      <p>The page remembers where it was and allocates that space as though the element was still there.</p>


    </div>
  </div>

  <div class="wrapper">
    <div class="box margin">
      <p>This grey box is moved using negative margin.</p>

      <p>See how the wrapper div has 'shrunk'?</p>

      &darr; &darr;
    </div>
  </div>


  <div class="wrapper">
    <div class="box transform">
      <p>This grey box is moved using a transform.</p>

      <p>The page remembers where it was and allocates that space as though the element was still there.</p>

    </div>
  </div>
</div>