.fancy-corner {
    position: absolute;
    --size: 3em;
    width: var(--size);
    height: var(--size);
    border-radius: 1em;

    background: #2e2e2e;

    --shadow: 0 0 0.5em rgba(0, 0, 0, 1), 0 0 0.5em rgba(0, 0, 0, 1);
    box-shadow: var(--shadow);
    --corner: 4em;

    --dot-shadow: 0 0 0.2em rgba(0, 0, 0, 1), 0 0 0.2em rgba(0, 0, 0, 1);

    --slide: 0.85em;
    --dot-slide: 0.2em;
}
.fancy-corner.fancy-top-left-corner {
    left: calc(-0.5 * var(--size));
    top: calc(-0.5 * var(--size));
    border-bottom-right-radius: var(--corner);

    transform: translate(var(--slide), var(--slide));
    --dot-slide-x: -1;
    --dot-slide-y: -1;
}
.fancy-corner.fancy-bottom-right-corner {
    right: calc(-0.5 * var(--size));
    bottom: calc(-0.5 * var(--size));
    border-top-left-radius: var(--corner);

    transform: translate(calc(-1 * var(--slide)), calc(-1 * var(--slide)));
    --dot-slide-x: 1;
    --dot-slide-y: 1;
}

.fancy-corner::after {
    content: "";
    position: absolute;
    left: calc(50% - (0.5 * var(--size)) + (var(--dot-slide-x) * var(--dot-slide)));
    top: calc(50% - (0.5 * var(--size)) + (var(--dot-slide-y) * var(--dot-slide)));
    background: rgba(0, 0, 0, 0.22);
    border-radius: 100%;
    --size: 1.05em;
    width: var(--size);
    height: var(--size);
    box-shadow: inset var(--dot-shadow);
}