Сделайте так, чтобы div адаптировался к размеру повернутых дочерних элементов с помощью CSS ⇐ CSS

[Anonymous]

У меня есть повернутый элемент div, содержащийся внутри блока, и я хочу, чтобы внешний элемент div точно содержал повернутые дочерние элементы. Вот пример:

Код: Выделить всё

Код: Выделить всё

.box {
content: '';
background-color: red;
width: 100px;
height: 100px;
transform: rotate(45deg)
}

.container{
margin: 3rem;
display: inline-block;
border: 5px solid black;
// padding: 19px;
}

Это выглядит следующим образом:


Добавляя отступы (комментарии выше), я могу приблизительно получить желаемый результат, а именно:


Проблема в том, что это неточно и жестко запрограммировано, а не автоматически.< /п>

Подробнее здесь: https://stackoverflow.com/questions/720 ... e-with-css