Задать вопрос
@pet1987
верстка

Как сверстать такой блок?

Нужно сверстать такой блок:

5d7392b9475d7236278712.png

Думаю можно использовать CSS свойство border-bottom-left-radius. С помощью этого свойства скруглить нижний-левый угол. Но как сделать этот блок двухцветным и с вырезом по центру не знаю. Есть какое-нибудь решение?
  • Вопрос задан
  • 212 просмотров
Комментировать
Подписаться 2 Простой Комментировать
Решения вопроса 1
LenovoId
@LenovoId
svg, css,js
Самое просто это открыть векторный редактор и нарисовать : https://codepen.io/topicstarter/pen/qBWxdGg
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ответы на вопрос 2
@Pavstyuk
Создаешь в векторном редакторе такую картинку (Inkscape, например) по размерам блока, или просто по соотношению сторон блока. И прописываешь в стилях background: url("путь/картинка.svg") 50% 50% no-repeat; background-size: cover; С позицией фона можно поэкспериментировать. Можно создать обычный png вместо svg, но вектор будет легче.
Ответ написан
Комментировать
Комментировать
@cgwic
Можно так
Не идеально, но как пример
Быстрее и нагляднее конечно через SVG
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
PHP-программист (SEO-правки)
Demis Group
от 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Пройти верификацию по лицу используя нейросеть, вебкамеру и эмулятор
25 апр. 2024, в 20:34
350000 руб./за проект
Доработка Django приложения и исправление ошибок конфигурации
25 апр. 2024, в 20:14
1000 руб./за проект
Завершение разработки проекта на CS2
25 апр. 2024, в 20:02
100000 руб./за проект
Ещё заказы