在CSS中按度数计算位置？

Question

好的,这个问题有点数学,有点CSS帮助...让我说我有一个多边形:

:root {
  --poly-height: 100px;
  --poly-width: 300px;
}

.poly1 {
  background-color: black;
  height: var(--poly-height);
  width: var(--poly-width);
  -webkit-clip-path: polygon(
    0 0,
    30px 100%,
    100% 100%,
    calc(100% - 20px) 50%,
    100% 0
  );
}

<div class="poly1">&nbsp;</div>

这个多边形有五个点,让我们调用它们A B C D E.

如果我们看点B,你可以看到x,y位置30px 100%.这导致了一个倾斜,我不知道多少度...

现在让我们说,在将来的某个时候,我想改变.poly1元素的高度.但是,更改元素的高度也会改变倾斜度,因为30px插入是固定的.

我想知道的是,如果有一种方法来计算插入的值,知道元素的高度,起点0,0和所需的倾斜程度,可以说20deg ......这可以在CSS calc中完成？

因此,从点开始A的0,0,我想获得的x点值B,渴望一个20deg倾斜,并且知道什么的价值y将是.在上面的例子中,它被设置为100px;

• 编辑*

在线搜索,我发现这个数学计算是:

y = height * tan(20 degrees)

现在......是否可以在CSS3计算中执行此操作？

Answer 1

CSS无法使用tan您建议的语法自行完成此操作.甚至像Sass/SCSS这样的预处理器语言也没有内置的三角函数.

--polygon-height如果你想只能在一个地方(或使用预处理器)改变它,你肯定需要一个CSS3变量().然后,您可以使用它var()来获取所需变量calc的tan值并近似值.

泰勒系列

泰勒系列是一些非常棒的东西.这就是引擎盖下的计算机可能会计算复杂的东西,比如你需要的三角函数.

这是你如何计算切线.

请注意,公式使用弧度而不是度.另请注意,这是一个近似值,可能会或可能不会对您有效,具体取决于您想要的角度大小和精度.如果您需要,可在线搜索更多条款.

履行

现在我们可以使用,calc因为我们只需要简单的加法和乘法.我们没有权力所以我们需要多次繁殖.

:root {
  --poly-height: 100px;
  --poly-width: 300px;
  --poly-degree: calc(20 * 0.0174533); /* degree to radian */ 
}

.poly1 {
  background-color: black;
  height: var(--poly-height);
  width: var(--poly-width);
  -webkit-clip-path: polygon(
    0 0,
    calc(var(--poly-height) * (var(--poly-degree) + (1/3) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) + (2 / 15) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) + (17/315) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree))) 100%,
    100% 100%,
    calc(100% - 20px) 50%,
    100% 0
  );
}

<div class="poly1">&nbsp;</div>

例

如果我们改变一些东西会发生什么.

:root {
      --poly-height: 200px;
      --poly-width: 300px;
      --poly-degree: calc(45 * 0.0174533);
    }

    .poly1 {
      background-color: black;
      height: var(--poly-height);
      width: var(--poly-width);
      -webkit-clip-path: polygon(
        0 0,
        calc(var(--poly-height) * (var(--poly-degree) + (1/3) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) + (2 / 15) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) + (17/315) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree) * var(--poly-degree))) 100%,
        100% 100%,
        calc(100% - 20px) 50%,
        100% 0
      );
    }

Height: 200px, degree: 45deg
<div class="poly1">&nbsp;</div>