Как сделать анимацию треугольника в квадрат при наведении?

Question

[kuzubina]

Всем добра!
Подскажите плиз, есть ли какие-либо варианты анимации с треугольника в квадрат как на этом примере пример, чтобы плавно 4-й угол появлялся. Только без использования clip-path и poligon т.к. у этих свойств почти нет поддержки в разных браузерах

Comments

[Froggyweb]

полно https://www.google.com/search?q=%D1%8B%D0%BC%D0%BF...

[Александр Варлаков]

"Только без использования clip-path и poligon т.к. у этих свойств почти нет поддержки в разных браузерах" - https://caniuse.com/?search=clip-path - ДА НУ? Я тестировал на safari 11, 12 Так же старых Афонях 5, 6 все работает

Answer 1

[Тынай Бакасов]

<div class='shape'></div>

.shape {
  position: relative;
  height: 100px;
  width: 100px;
  overflow: hidden;
}
.shape:after {
  position: absolute;
  content: '';
  height: calc(100% * 1.414); /* using Pythogras theorem */
  width: calc(100% * 1.414); /* using Pythogras theorem */
  transform: rotate(-45deg);
  transform-origin: left top;
  background: blue;
  transition: all 1s;
}
.shape:hover:after {
  transform: rotate(0deg);
}

Comments

[Тынай Бакасов]

<div class='shape'></div>

.shape{
  height: 0px;
  width: 0px;
  border: 50px solid transparent;
  border-color: blue blue transparent transparent;
  transition: all 1s;
}
.shape:hover{
  border-color: blue;
}

[Тынай Бакасов]

[kuzubina]

Тынай Бакасов, спасибо, но немного не то что нужно. 4-й угол с цетра должен появляться как в примере

[Тынай Бакасов]

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='shape'></div>

.shape{
  height: 100px;
  width: 100px;
  background: linear-gradient(to bottom left, blue 49.5%, transparent 50.5%);
  background-position: 100% 0%;
  background-size: 100% 100%;
  transition: all 1s;
}
.shape:hover{
  background-size: 200% 200%; /* just double the background size on hover */
}

[kuzubina]

Тынай Бакасов, нужен вот такой эффект, только с таким способом не работает в фаерфоксе пример

[Тынай Бакасов]

kuzubina,
Вот на css

[kuzubina]

Тынай Бакасов, Спасибо огромное :)