使CSS生成的三角形显示在div底部大小的一半

我很难理解为了影响这个CSS三角形的大小（如最初定义的那样），我必须改变什么。我正在寻找相同的效果，但大约50%的小三角形

我在引用的stackoverflow post@DanielD中注意到以下内容：

1） （左侧填充+宽度）/顶部填充=（左侧边框+右侧边框）/顶部边框=底部/高度

2） 左边距=-左边框=-右边框

3） 边距顶部=-边框顶部

4） 宽度=左填充

但当我试图遵循这一点时，我完全糊涂了

这是我的当前代码：

HTML:

<div class="top">
    <div class="triangle-down"></div>
</div>
<div class="bottom"></div>

.top
{
    background: pink;
    height: 100px;
    position: relative;
}

.bottom
{
    background: lightGreen;
    height: 100px;
}
.triangle-down{
    width: 3%;
    height: 0;
    padding-left:3%;
    padding-top: 2%;
    overflow: hidden;
    position: absolute;
    left:0;right:0;
    margin:auto;
    top: 100px;
    z-index:1;
}
.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-50px;
    margin-top:-33px;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 33px solid pink;
}

由于三角形仅由边框组成，因此必须影响

：after

元素的每个边框。然后，您必须通过更改

页边距顶部

和

页边距左侧

值来补偿大小的变化

.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-25px;
    margin-top:-25px;

    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-top: 25px solid pink;
}

---

如果更改：

padding left:1.5%；
垫面：1%在三角形内，它应该将大小更改为原来大小的一半

同时改变
宽度：1.5%

我希望这就是您要找的。
这样做的问题是，它似乎打乱了中心线，请看这里：哦，接球不错，我甚至没有注意到这一点。如果你把宽度也切成两半呢<代码>宽度：1.5%它似乎为我修复了“缓冲区”。谢谢，但不幸的是，这个比例似乎与原来的不同。原来帖子中的三角形看起来更平坦了，我试着调整了一下，但还是弄得一团糟。我给出的比例正好是面积的一半。也许可以尝试使用边框左、顶部为50、边距左为-50。你真正想要的不是清晰的嘿，扎克，我需要三角形的大小是当前大小的一半，它在上面的例子中。对不起，如果我的问题不清楚-也许这让它更清楚：恐怕我不能再帮你了，因为尺寸是相对的。使用这种方法，在获得所需的值之前，请一直使用这些值。只要用你想要的数字或改变比例来替换25就行了