Как сделать квадратную аватарку с 45% наклоном?

Question

[Роман]

скрин как в макете
как сделать такую аватарку посредством цсс? у меня пока только 2 варианта,но не очень удачных как по мне.
1)Это кидать цсс треугольники на каждую сторону, но это топор, т.к. этот способ работает только на однородном фоне.
2)Каждую аватарку загружать только в таком виде, но это гемор)

Comments

[Модератор]

3.9. Использовать для вставки изображений тег < img> (размещение ссылок на изображения без использования тега < img> запрещено).

Answer 1

[Алексей Уколов]

Классика же - поворачивать контейнер на 45% через transform, а содержимое поворачивать в обратную сторону на столько же.
https://codepen.io/alexey-m-ukolov/pen/PBdazG

Comments

[Роман]

что то я затупил очень сильно)))) действительно, все очень просто)

[Роман]

можете обьяснить, почему свойство trasform: rotate увеличивает размер блока? например мы прописываем ширину и высоту 100рх, а после применения trasform:rotate(45deg) у нас уже на выходу получается 150рх

[Алексей Уколов]

Ну так стандартная геометрия же - сумма квадратов катетов равна квадрату гипотенузы (т.е. ≈142px в данном случае). Браузер умеет работать только с горизонтально ориентированными прямоугольниками, поэтому при повороте получается объект большего размера с четырьмя "пустыми" углами.

Answer 2

[Andrej Sharapov]

можно так https://jsfiddle.net/6q5319rm/

Comments

[Алексей Уколов]

Битва богов интернета: анимешные девочки против Гейба :)

[Andrej Sharapov]

Алексей Уколов, я хз кто это) погуглил, взял первую))