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

Question

[Виталий Семьянчук]

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

Так вот, не дается мне второй блок, не могу придумать, как сделать вверху него такой же прозрачный треугольник под которым видно было первый блок, и чтобы он нормально выглядел, когда сжимаешь страницу до 480 пк.
Может, кто сталкивался или знает, есть такой же макет?

Answer 1

[Евгений Низамиев]

cssdeck.com/labs/yvaw6xqk
Вот так. будут вопросы - задавайте

Comments

[Евгений Низамиев]

habrastorage.org/files/d3c/d6f/06f/d3cd6f06f31945b...

[Виталий Семьянчук]

Гениально, спасибо все заработало !!!

[Константин Величко]

Ну можно и так но это IE8+ решение

[Виталий Семьянчук]

и еще одно на fire fox не работает

[Константин Величко]

Должно работать на FF 3.5+

[Виталий Семьянчук]

блин везде работает, вот только на фоксах не хочет, может посмотрите, опытным глазом и сможете сказать что не так делаю osnova.dyndns.info:8080/loc8tor_v2.magento там голубой блок по центру страницы

[Руслан]

@fix20152 работает же FF27.0.1 yadi.sk/d/4qDQ25OcKjimq

[Виталий Семьянчук]

нижний да но верхний треугольник нет

Answer 2

[Руслан]

аа, не заметил что у вас 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%;
}

Comments

[Виталий Семьянчук]

Спасибо заработало

Answer 3

[Константин Величко]

Элементарно таблицей
cdpn.io/zijkb