html - 如何计算出边框旋转造成的位置差异

Question

我今天花了很多时间进行搜索，但找不到真正解决我的特定问题的任何东西。

我改编了一个 SASS mixin，用于创建在元素中使用的 CSS 开放箭头。人造箭头、导航等

我的问题是我不知道如何算出元素的位置在什么时候移动多少:

a) 发生旋转

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

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

示例如下:

p {   
    color: red;
    width: 100px;
    font-family: Arial;
    text-transform: uppercase;
    position: relative;
}
  
p::before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0rem;
    height: .125rem;
    width: .875rem;
    background: currentColor;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: .25s cubic-bezier(0.39, 0.575, 0.565, 1);
    transform-style: preserve-3d;
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
    z-index: 1;
}

p::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0rem;
    height: .125rem;
    width: .875rem;
    background: currentColor;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: .25s cubic-bezier(0.39, 0.575, 0.565, 1);
    transform-style: preserve-3d;
    transform: translateY(-100%) rotate(135deg);
    z-index: 1;
}

<p>Arrow</p>

mixin 是这样的:

@mixin arrow($width: 1, $length: 6, $position: 0, $placement: right, $rotate: 0) {

    position: relative;

      &:before,
      &:after {
          content: '';
          display: inline-block;
          position: absolute;
          top: 50%;
          @if ($placement==right) {
            right: rem($position);
          } @else {
            left: rem($position);
          }
          height: rem($width);
          width: rem($length);
          background: currentColor;
          backface-visibility: hidden;
          transition: $transition-speed $transition-easeInOutSine;
          transform-style: preserve-3d;
          transform: translateZ(0) rotate(#{$rotate}deg);

      }
      &:before {
          transform: translateX(-100%) translateY(-100%) rotate(#{$rotate + 45}deg);
      }
      &:after {
          transform: translateY(-100%) rotate(#{$rotate + 135}deg);
      }

  .is-active &,
      .is-open & {
          &:before {
              transform: translateX(100%) translateY(-100%) rotate(-#{$rotate + 45}deg);
          }
          &:after {
              transform: translateY(-100%) rotate(#{$rotate + 225}deg);
          }
      }

}

例子如下:

我已经尽我所能解释了，我希望这就足够了。基本上，我正在尝试根据我所掌握的数字找出缩小差距的方法!

提前致谢!

请原谅任何其他问题，这是一个 WIP。

Answer 1

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

span{
  position: relative;
  padding-right: 18px;
}

span::after{
  position: absolute;
  right: 0;
  top: 0;
  width:10px;
  height:10px;
  content: "";
  transform: rotate(45deg);
  display: block;
  border-width: 2px;
  border-color: red;
  border-style: solid;
  border-top: none;
  border-left: none;
 }

<span>Arrow</span>