aagzip

Блок section.test становится меньше, вот и все.

Потому что у вас не задана явно высота блока section.test
По умолчанию высота блока равна высоте контента внутри него.

position: absolute;
right: 0;
bottom: calc(50% - 25px);

Вышеуказанными свойствами вы перемещаете блок в другое место и высота section.test уменьшается.

Смените position: absolute, на position: relative у .dropdown-content, либо уберите position совсем.

Такое можно сделать с помощью mask-border:

Напрмер:

Маска

<div class="masked">This element is surrounded by a bitmap-based mask border! Pretty neat, isn't it?</div>

.masked {
    -webkit-mask-box-image: url("mask-border-diamonds.png")
        30 fill /          /* slice */
        20px /             /* width */
        1px                /* outset */
        round;             /* repeat */
    
    mask-border:
        url("mask-border-diamonds.png")
        30 fill /        /* slice */
        20px /           /* width */
        1px              /* outset */
        round;           /* repeat */
}

Совсем подробно, описано тут: https://developer.mozilla.org/en-US/docs/Web/CSS/m...
Еще более подробно тут: https://css-tricks.com/clipping-masking-css/