Css 在前置的：：after上进行转换后删除多余的填充

哇，那是个糟糕的标题

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

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

我在一个页面生成器ClickFunnels中工作。以下是链接：

以下是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%);
}

以下是我想要消除的空间：

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

这是意料之中的。变换纯粹是可视的，不会影响布局。我想试试负边际

这里有一个我经常看到的不同行为的演示

* { 框大小：边框框； } h3{ 文本对齐：居中； } .第页{ 保证金：0自动； 文本对齐：居中； } .包装纸{ 边框：5px纯黑； 保证金：5px； 显示：内联块； 背景：浅蓝色； 垂直对齐：顶部； } .盒子{ 宽度：100px； 高度：350px； 背景：浅灰色； 边框：1px纯灰； 填充：10px； 文本对齐：居中； } .职位{ 位置：相对位置； 顶部：-25px； } .保证金{ 利润上限：-25px； } .变换{ 转换：translateY-25px； } 演示相对定位与正/负边距和变换之间的差异 这个盒子是用于比较的样本

它是一个灰色的盒子，在一个有黑色边框的蓝色盒子里

使用相对定位移动此灰色框

页面会记住它所在的位置并分配空间，就像元素仍然在那里一样

使用负边距移动此灰色框

看看包装器div是如何“收缩”的

&达尔&达尔； 使用变换移动此灰色框

页面会记住它所在的位置并分配空间，就像元素仍然在那里一样

---

这是意料之中的。变换纯粹是可视的，不会影响布局。我想试试负边距，谢谢！嗯，似乎不能将你的回复标记为答案。那是因为@Paulie_D发布了一条评论而不是答案。也许他们想发布一个答案，我已经通知了他们。否则我可以获得荣誉。顺便说一句，这确实是一个不错的标题，尽管它看起来很冗长。谢谢，@BoltClock！