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

Question

（哇，这真是个糟糕的标题！）

我创建了一个小 quarter-circle 以在 div 之后显示。然后我使用 transformY 将其移回 div 以便某些内容重叠，这是用户的设计要求。

但是，这样做会在 div 的底部留下一些多余的 space... div 在变换后保留了完整的高度。我想降低那个高度。

我在页面构建器 (ClickFunnels) 中工作。这是 link：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%);
}

这是我要消除的space：

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

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>

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

Remove excess padding after transformY on predecessor's ::after

css

css-transforms