CSS doesn't render correctly

[t3db0t]

I have some CSS that creates notched boxes.

In browser:

In rendered PDF:

The styled-component:

export const ParamNotchedBox = styled.div`
  box-sizing: border-box;

  /* position */
  position: relative;
  display: grid;
  justify-content: center;
  align-content: center;

  --color: #282828;
  --width: ${props => props.width}em;
  --height: ${props => props.height}em;
  --hslant: 10%;
  --vslant: ${props => props.width / props.height * 10}%;

  width: var(--width);
  height: var(--height);
  background: #282828;

  &:before {
    content: "";
    --border-width: ${props => props.borderWidth || "3px"};;
    position: absolute;
    top: calc(var(--border-width) / 2);
    left: calc(var(--border-width) / 2);
    width: calc(var(--width) - var(--border-width));
    height: calc(var(--height) - var(--border-width));
    
    background: white;
  }

  &, &:before {
    /* notches */
    clip-path: polygon(
      0 var(--vslant),
      var(--hslant) 0,
      100% 0,
      100% calc(100% - var(--vslant)),
      calc(100% - var(--hslant)) 100%,
      0 100%);
  }

  & p {
    position: relative;
    color: var(--color);
    font-family: 'Josefin Sans', sans-serif;
    font-size: ${props => props.fontSize || "20px"};
    font-weight: 600;
    padding-top: 3px;
  }
`;

Any idea where the problem might lie? I assume it's a problem with html2canvas...