Html 如何计算边界旋转产生的位置差异

我今天花了不少时间搜索，但找不到任何真正解决我这个问题的方法

我已经修改了一个SASS mixin，用于创建CSS开放箭头，以便在项目中使用。人造箭头、导航等

我的问题是，我无法计算出在以下情况下，如何计算元素位置的偏移量：

a） 发生旋转

b） 当线条/边框的宽度改变时

我知道一定有一些简单的数学来实现它，但它太长了，我记不起来了

示例如下：

p{
颜色：红色；
宽度：100px；
字体系列：Arial；
文本转换：大写；
位置：相对位置；
}
p：：以前{
内容：''；
显示：内联块；
位置：绝对位置；
最高：50%；
右：0rem；
高度：.125rem；
宽度：.875雷姆；
背景：彩色；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
过渡：25s立方贝塞尔（0.39,0.575,0.565,1）；
变换样式：保留-3d；
变换：translateX（-100%）translateY（-100%）旋转（45度）；
z指数：1；
}
p：：之后{
内容：''；
显示：内联块；
位置：绝对位置；
最高：50%；
右：0rem；
高度：.125rem；
宽度：.875雷姆；
背景：彩色；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
过渡：25s立方贝塞尔（0.39,0.575,0.565,1）；
变换样式：保留-3d；
变换：translateY（-100%）旋转（135度）；
z指数：1；
}

---

箭头

我认为您应该放弃尝试对齐两个单独的元素，并使用旋转的正方形创建箭头

span{
位置：相对位置；
右边填充：18px；
}
span：：之后{
位置：绝对位置；
右：0；
排名：0；
宽度：10px；
高度：10px；
内容：“；
变换：旋转（45度）；
显示：块；
边框宽度：2倍；
边框颜色：红色；
边框样式：实心；
边界顶部：无；
左边界：无；
}

---

Arrow

如果你能给我们一个有效的演示，那会很有帮助的。是的，请在这里添加一个代码片段（html和编译的css）抱歉，我想这可能足够从我所写的内容中得出结论了。我现在要添加一个。谢谢，但是如果输出结果符合要求，我会使用这个。您无法更改箭头线的长度。这是这个项目所需要的。