Question

所以我知道如何使用边框制作一个纯CSS三角形，但三角形的角度是未知的。

我想根据输出数字（这是一个角度）的一些jQuery计算创建一个角度图像。

所以：

Flow of what I want to achieve.

我对jQuery很开放，因为角度是用它来计算的，但是如果有一些不起眼的CSS那么那就是优惠！

Answer 1

正如我所见。您正在寻找使用网络的可视化。好主意。

我建议你不仅仅是一个三角形。

这里有一些javascript库列表，非常适合这类东西。

以下是链接。

D3 - 即Data Driven Documents。早期版本命名为Protovis。借助d3的帮助，您可以使用svg（标量矢量图形）元素创建出色的可视化效果。这是有据可查的。易学和很多其他人帮助你。示例Stack Overflow。
NVD3 - 在d3的帮助下构建另一个很棒的库。 NVD3的主要特点是所有图表都非常灵敏。而使用NVD3也是最佳选择。我使用的大多数条形图，饼图和普通图表是NVD3：）

使用d3构建了更多库。你可以谷歌。

如果你建议使用jQuery图表。这是一些链接。

但我没有使用上面的库，除了Spark Line。

还有更多其他用于可视化的JavaScript库。

这是我在浏览Stack Overflow时发现的另外一个。

AM Charts - 图表和地图非常令人惊讶。

你甚至可以试试这个。

还尝试谷歌搜索更好的可视化的JavaScript库。

Answer 2

因此，虽然另一个答案提供了大量基于用户输入制作三角形角度的平台，但我仍然觉得有必要对此进行研究并制定一个不包含所有附加图形的解决方法。

这是我提出的方法：http://codepen.io/anon/pen/pFute

这是标记：

<强> HTML

<section>
  <div class="box2"><div class="box"></div></div>
</section>

我使用<section>来分解<div>，但我可能只是在生产中使用3 <div>。

<强> CSS

section {
    position: relative;
    width: 400px;
    height: 200px;
    margin: 200px auto 0 auto;
    border: 1px solid #DDD;
}
.box, .box2 {
    position: absolute;
    background: #000;
    transform-origin: bottom left;
    height: 1px;
    width: 200px;
}
.box {
    bottom:1px;
    background: #F00;
    transform: rotate(-100deg);
}
.box2 {
    bottom: 0;
    right:0;
}

现在在.box，您可以更改rotate的值，它会将该行旋转为任何值。

在我的情况下，它归结为用户输入所有数据后计算的值。

从这里我可以通过jQuery注入'transform: rotate(-' + VALUE + 'deg);'。

编辑：如果您希望角度与原始图片一样，请使用此笔：http://codepen.io/anon/pen/sjIpx

基于度数的CSS三角形/角度

2 个答案: