Страницы

Поиск по вопросам

вторник, 16 апреля 2019 г.

Центрировать текст относительно ромба

Подскажите, как его отцентрировать, чтобы как на фото было?

.zaslugi_icons { width: 140px; float: left; padding-top: 48px; padding-left: 39px; padding-right: 18px; } .zaslugi_icons p { font-family: 'Open Sans', sans-serif; font-weight: 300; color: #000; } .zaslugi_icons span { display: block; }

Реализованных проектов

Положительных отзыва

Лет опыта



Ответ

Без псевдо элементов
* { margin: 0; padding: 0; } .unit { background: #fff; width: 150px; height: 150px; border: 1px solid red; position: relative; transform: rotate(45deg); overflow: hidden; margin: 0 40px; } .border { position: absolute; top: 15px; left: 15px; width: 120px; height: 120px; border: 1px solid blue; } .wrapper { display: flex; margin: 10px; } .over { width: 100px; height: 100px; transform: rotate(-45deg); position: absolute; top: 25px; left: 25px; text-align: center; line-height: 100px; border-radius: 50%; } .unites { height: 200px; padding: 30px; position: relative; } .unites .vois { color: red; position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-size: 1.2em; }

75

Наши отзывы

115

Выполненые работы

180

Количество благодарных клентов

75

Наши отзывы

115

Выполненые работы

180

Количество благодарных клентов


Комментариев нет:

Отправить комментарий