求解应用skewX(12deg)变换的伪元素右下角坐标

我来帮你搞定这个问题！要找到skew变换后伪元素的右下角位置，我们可以通过数学计算或者直接获取元素实际位置两种方式来实现，下面详细说明：

一、数学计算修正版 #

之前的思路方向是对的，但需要注意两个关键细节：

• JavaScript的Math.tan()函数只接受弧度值，必须先把角度转换成弧度
• Tailwind的-skew-x-12对应skewX(-12deg)，偏移方向是向左，需要用元素高度乘以tan(12deg)后做减法

修正后的代码 #

const content = document.querySelector('.content');
const progress = document.querySelector('.progress');
const root = document.documentElement;

setLeft();
window.addEventListener('resize', setLeft);

function setLeft() {
  const bounds = content.getBoundingClientRect();
  // 伪元素的原始宽度（屏幕宽度的3/5）
  const originalPseudoWidth = bounds.width * 3 / 5;
  // 将12度转换为弧度
  const radians = 12 * (Math.PI / 180);
  // 计算skew导致的水平偏移量（-skew-x-12会让元素向左偏移）
  const skewOffset = bounds.height * Math.tan(radians);
  // 最终的left值 = 原始宽度 - 偏移量
  const finalLeft = originalPseudoWidth - skewOffset;
  
  root.style.setProperty('--pseudo-left', `${finalLeft}px`);
}

关于精度偏差的说明 #

手动计算时可能出现微小偏差，原因包括：

• CSS变换的浮点精度处理和JavaScript计算的精度差异
• 浏览器渲染时的自动像素对齐（避免元素模糊）

如果追求绝对精准，更推荐下面的方法：

二、直接获取伪元素的实际位置 #

我们可以直接获取伪元素的渲染后位置，拿到它的右边缘坐标，这个值就是进度条需要的left值，完全不需要手动计算：

const content = document.querySelector('.content');
const progress = document.querySelector('.progress');
const root = document.documentElement;

setLeft();
window.addEventListener('resize', setLeft);

function setLeft() {
  // 获取伪元素的计算样式
  const pseudoStyle = window.getComputedStyle(content, '::before');
  // 创建临时元素模拟伪元素的尺寸与变换，用于获取实际位置
  const tempEl = document.createElement('div');
  tempEl.style.width = pseudoStyle.width;
  tempEl.style.height = pseudoStyle.height;
  tempEl.style.transform = pseudoStyle.transform;
  tempEl.style.position = 'absolute';
  tempEl.style.top = pseudoStyle.top;
  tempEl.style.left = pseudoStyle.left;
  content.appendChild(tempEl);
  
  // 获取临时元素的右边缘位置
  const tempBounds = tempEl.getBoundingClientRect();
  const finalLeft = tempBounds.right;
  
  root.style.setProperty('--pseudo-left', `${finalLeft}px`);
  
  // 移除临时元素
  content.removeChild(tempEl);
}

这种方法完全依赖浏览器的渲染结果，能彻底避免手动计算的精度问题，视觉效果会完全匹配需求。

内容的提问来源于stack exchange，提问作者NickW