Максим

https://codepen.io/topicstarter/pen/OZZwzb

можно flexbox применить : justify-content:center; align-items:center;
так же с absolute : left:50%; right:50%; transform:translate(-50%,-50%);

не указывать явно высоту ... можно написать min-height но не height

flip block css - search google | yandex

стили для текста которые были специально придуманы для этого почему не катит ?

у меня получилось :))

Вы думаете если не показали код на ru.stackoverflow.com то вопрос станет понятнее здесь ? или думаете здесь есть потомственные внуки бабушки Ванги а на stackoverflow нету ?

в общем для uk-margin присвоить padding-bottom:30px position:relative и потом для arenda56 position:absolute bottom:+-10px и будет вот так

Вам надо не треугольники делать , а сделать маску- фильтр который будет добавлять маску к фото ...некий прозрачный бордюр в виде треугольника т.е как бы перекрывать картинку этим бордюром .... если у меня получится это сделать я покажу пример

Вот смотри : я применил маску как и написал выше : https://codepen.io/topicstarter/pen/YagNyJ?editors=0110
это пример адаптивной маски: https://codepen.io/topicstarter/pen/NYJdjx

Есть даже кастомизатор , т.е можно оформить по своему : https://jqueryui.com/menu/#default

https://codepen.io/topicstarter/pen/vRbpyX?editors=1100