Можно ли так анимировать треугольник?

Question

[drtvader]

Привет!
Можно ли анимировать треугольник стилями?
take.ms/edF6R

Answer 1

[Александр]

<svg>
  <polyline id="tri" points="0,0 100,0 100,50 60,50 50,50 40,50 0,50 0,0"  stroke="red" stroke-width="5" fill="transparent"/>

  <animate 
    xlink:href="#tri"
    attributeName="points"
    from="0,0 100,0 100,50 60,50 50,50 40,50 0,50"
    to="0,0 100,0 100,50 60,50 50,60 40,50 0,50" 
    dur=".2s"
    begin="mouseover"
    fill="freeze" />
  <animate 
    xlink:href="#tri"
    attributeName="points"
    from="0,0 100,0 100,50 60,50 50,60 40,50 0,50"
    to="0,0 100,0 100,50 60,50 50,50 40,50 0,50" 
    dur=".2s"
    begin="mouseout"
    fill="freeze" />
    </svg>

только никак не пойму почему толщина обводки разная

Comments

[drtvader]

Спасибо, буду пробовать!

Answer 2

[Fudo Tsukiko]

смотря как

Comments

[drtvader]

стилями можно?)

[Fudo Tsukiko]

drtvader, да

[Fudo Tsukiko]

drtvader, можно поворачивать 2 div'a

[drtvader]

Fudo Tsukiko, а если бордер вытягивать?

[Fudo Tsukiko]

drtvader, тоже можно

[drtvader]

Fudo Tsukiko, примеров не видел?

[Fudo Tsukiko]

drtvader, нет. мне нравятся анимированные квадратики

Answer 3

[Леонард Теснов]

Это сделано при помощи clip-path и .animate()
что такое clip-path можно посмотреть в инете, такое может получится:

Comments

[drtvader]

IE10 в поддержке, а он даже 11 не тянет.