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

Question

(Wow, that was a lousy title!)
I created a little quarter-circle to display after a div. I then used transformY to move it back up the div so that some content overlaps, which is the user's design requirement.
However, doing so leaves some excess space at the bottom of the div... the div retains the full height after the transform. I'd like to reduce that height.
I'm working in a page builder (ClickFunnels). Here's the link: https://www.goupperpeninsula.com/get-your-arts-on
Here's the 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%);
}
Here's the space I'd like to eliminate:
I feel like I'm missing something obvious, I'm just not quite sure what it is!

Answer 1

This is expected. A transform is purely visual and does not affect layout. I'd try negative margin instead.
Here's a demo of the different behaviours I keep around.
* {
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>
↓ ↓
</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>