在 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 的起点和所需的倾斜度，是否有一种方法可以计算插图的值，比方说 20 度...这可以在 CSS 计算中完成吗？

所以从 0,0 的点 A 开始，我想获得点 B 的 x 值，希望倾斜 20 度，并且知道y 的值将是。在上面的例子中，它被设置为 100px;

编辑 *

网上搜索，我发现这个的数学计算是：

y = height * tan(20 degrees)

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

Answer 1

CSS 无法使用您建议的语法 tan 单独执行此操作。即使 Sass/SCSS 等预处理器语言也没有内置三角函数。

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

泰勒级数

Taylor series 是一些非常棒的东西。这就是引擎盖下的计算机可能如何计算复杂的东西，例如您需要的三角函数。

下面是计算切线的方法。

请注意，公式使用的是弧度而不是度数。另请注意，这是一个 近似值 并且可能适用也可能不适用于您，具体取决于您想要的角度大小和精度。如果需要，请在线搜索更多术语。

实施

现在我们可以使用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>

在 CSS 中按度数计算位置？

Calculate position by degrees in CSS?

css

trigonometry

泰勒级数

实施

例子