Задать вопрос
fix20152
@fix20152
javascript developer
html

Как сделать верстку с треугольниками?

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

Так вот, не дается мне второй блок, не могу придумать, как сделать вверху него такой же прозрачный треугольник под которым видно было первый блок, и чтобы он нормально выглядел, когда сжимаешь страницу до 480 пк.
Может, кто сталкивался или знает, есть такой же макет?
  • Вопрос задан
  • 3076 просмотров
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 2
RadiationX
@RadiationX
Front-End разработчик
cssdeck.com/labs/yvaw6xqk
Вот так. будут вопросы - задавайте
Ответ написан
8 комментариев
8 комментариев
rOOse
@rOOse
Frontend developer
аа, не заметил что у вас 3 треугольника должно быть, вот код: 
.cms-home .main .col-main .std .hero .hero-title-row-2:before {
    border-bottom: 15px solid #62B3F7;
    border-left: 15px solid rgba(0, 0, 0, 0);
    content: "";
    height: 10px;
    position: absolute;
    right: 0;
    top: -24.5px;
    width: 49.5%;
}
.cms-home .main .col-main .std .hero .hero-title-row-2:after {
    border-bottom: 15px solid #62B3F7;
    border-right: 15px solid rgba(0, 0, 0, 0);
    content: "";
    height: 10px;
    left: 0;
    position: absolute;
    top: -24.5px;
    width: 48.5%;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
Zoxon
@Zoxon
Веб-разработчик
Элементарно таблицей
cdpn.io/zijkb
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Пройти верификацию по лицу используя нейросеть, вебкамеру и эмулятор
25 апр. 2024, в 20:34
350000 руб./за проект
Доработка Django приложения и исправление ошибок конфигурации
25 апр. 2024, в 20:14
1000 руб./за проект
Завершение разработки проекта на CS2
25 апр. 2024, в 20:02
100000 руб./за проект
Ещё заказы