Как грамотно реализовать такой момент в верстке?

Question

[Alice777]

Есть такое расположение блоков: https://jsfiddle.net/1o2j7bq2/

Нужно повернуть картинку на 90радусов так, чтобы она также ровно вписалась в блок, как и в моем наброске сейчас
Должно в результате получиться так:

Comments

[Сергей Горячев]

То есть вам совсем наплевать, что на разных экранах (ширина) будет смотерться совершенно по разному, поскольку блок не фиксированной ширины?

[Alice777]

Сергей Горячев: Это только десктопная версия, мобильная и планшетная выглядит по-другому

[Сергей Горячев]

Alice777: А что, десктопы бывают только вашей ширины? У меня например на столе в данный момент 4 монитора, 1366, 1600, 1920 и 2560. На каждом из них блоки выглядят совершенно по разному.

Answer 1

[BB 8]

Грамотно ? Изучить флексы до конца и не использовать в них width: 30%. Чтобы перевернуть картинку: transform: rotate(ndeg). n - число от 0 до .... Проверьте сами)

Answer 2

[Максим]

https://jsfiddle.net/1o2j7bq2/1/ шляпа какая то получается - в ручном режме -

Answer 3

[twobomb]

https://jsfiddle.net/twobomb/1o2j7bq2/2/

Comments

[Андрей]

В самом главном и прекрасном браузере Safari "картинко" отсутствует. (:
https://www.dropbox.com/s/jbvnpqjgtcb88zl/%D0%A1%D...
Версия 10.1.1 (12603.2.4)

А вот в STP есть
https://www.dropbox.com/s/0099la18nyi3vjv/%D0%A1%D...
Release 35 (Safari 11.0, WebKit 12604.1.29)

А вот почему так я не понял.

[twobomb]

Андрей: Мож так . Но врядли

[Андрей]

twobomb:
O_o
https://www.dropbox.com/s/7tlr4kuxs5naage/%D0%A1%D...
я чего-то не знаю об этом браузере или он у меня "сломалси".

[Андрей]

Сам себе отвечу, это проблема с высотой элемента, сафари не хочет считать 100% высоты от родителя у которого задано height: auto;
https://stackoverflow.com/questions/33636796/chrom...