CSS3 border-radius剪切问题

border: 2px solid #000;

border-radius: 5px;

transform: rotate(1deg);

mask: linear-gradient(red, transparent);

const border = document.querySelector('.border');
const radius = 5;
const angle = (Math.PI / 180) * 90;
const topLeft = { x: -radius * Math.cos(angle), y: -radius * Math.sin(angle) };
const topRight = { x: radius * Math.cos(angle), y: -radius * Math.sin(angle) };
const bottomRight = { x: radius * Math.cos(angle), y: radius * Math.sin(angle) };
const bottomLeft = { x: -radius * Math.cos(angle), y: radius * Math.sin(angle) };

border.style.cssText = `
  border: 2px solid #000;
  border-radius: ${radius}px;
  ${topLeft.x === -radius * Math.cos(angle) && topLeft.y === -radius * Math.sin(angle) ? 'left' : 'top'} ${topRight.x === radius * Math.cos(angle) && topRight.y === -radius * Math.sin(angle) ? 'right' : 'bottom'} ${bottomRight.x === radius * Math.cos(angle) && bottomRight.y === radius * Math.sin(angle) ? 'right' : 'bottom'} ${topLeft.x === -radius * Math.cos(angle) && topLeft.y === radius * Math.sin(angle) ? 'left' : 'top'}`;