在CSS中按度数计算位置？

Question

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

＆＃13;

＆＃13;

: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
  );
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此多边形有五个点，我们称之为A B C D E。

如果我们查看点B，您可以看到x,y位置为30px 100%。这导致我倾向于不知道多少度......

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

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

从A的{​​{1}}点开始，我想得到点0,0的{​​{1}}值，希望得到一个20度的倾斜，并知道它的价值是多少x将是。在上面的示例中，它设置为B;

• 编辑*

在线搜索，我发现数学计算方法是：

y

现在......是否可以在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>