Geek asks and answers

CSS triangle / angle based on degree

So, I know how to make a pure CSS triangle using borders, but the angle of the triangle is unknown.

I want to create an angle image based on some jQuery calculations that output a number (which is an angle).

So:

Flow of what I want to achieve.

I am open to jQuery, obviously, because the angle is calculated with it, but if there is some obscure CSS, that would be preferable!

+3
source share
2 answers

Thus, although the other answer has a large set of platforms for creating triangular angles based on user input, I still felt obligated to work on this and make a workaround that did not include all the additional graphics.

, : 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, .

, .

'transform: rotate(-' + VALUE + 'deg);' jQuery.

: , , , : http://codepen.io/anon/pen/sjIpx

0

. . .

, .

javascript, .

.

  • D3 - Data Driven Documents. Protovis. d3 svg ( ). . , . .

  • NVD3 - d3. NVD3 , . NVD3 . , , , NVD3:)

, d3. .

jQuery. .

, Spark Line.

javascript .

, , Stack Overflow.

AM Charts - .

.

google javascript-, .

+2

More articles:


All Articles