Страницы

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

среда, 17 октября 2018 г.

Верстка изогнутого блока

Добрый день, может кто подсказать сверстать такой блок а точнее эту изогнутую шапку на блоке?


Ответ

С размерами можно поиграться, но идея примерно такая:
.wrapper { width: 200px; height: 20px; background-color: gray; margin: 20px auto; border-radius: 10px; position: relative; } .dot { position: absolute; width: 17px; height: 20px; background-color: black; border-radius: 50%; } .dot.right { top: 0; right: 0; } .lorem { position: absolute; width: 280px; height: 150px; background: linear-gradient(to right, white, silver); top: 10px; left: -40px; box-shadow: 0 0 2px silver; border-radius: 5px; text-align: center; font-size: 40px; padding-top: 120px; } .step { position: absolute; width: 166px; height: 60px; background-color: gray; top: 0; left: 17px; color: white; text-align: center; font-size: 36px; font-weight: bold; padding-top: 30px; } .romb { position: absolute; left: 63px; top: 53px; width: 74px; height: 74px; background-color: gray; transform: rotate(-45deg) skew(30deg, 30deg); }

Lorem ipsum dolor sit amet
ШАГ 1

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

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