Как сверстать этот треугольник что бы был как на скрине?

Question

[Immix]

Создаю через css с помощью after треугольник, но как сделать что бы не было видно нижнего розового фона, а подложить туда например через margin-bottom: -40px фото как на скрине

Код треугольника:

#fourth-page:before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: calc(50% - 40px);
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 35px solid black;
}

Вот как выглядит:


Надо как то наложить нижний фон на верхний что ли, но что бы розовый фон под треугольником не было видно. Короче не знаю как реализовать...

Answer 1

[Андрей Верх]

В общих чертах. Правда с лишним дивом.

Answer 2

[Антон Жуков]

ну можно ведь по-человечески сверстать
зачем вот это left: calc(50% - 40px);
:-(
ну а если по делу - то придется лепить розовый фон так
[|||||||||||||||||||||||||]\/[|||||||||||||||||||||||||] поверх темной картинки

Comments

[Immix]

но как так сделать?) и как лучше написать это: left: calc(50% - 40px) ?

[lexchz]

left: 50%;
margin-left: -40px;

[Максим Будин]

забудь про калк, он не поддерживается кучей браузеров

Answer 3

[lexchz]

Как вариант - 2 фона использовать. Верхний - текстура, нижний - розовый svg с вырезом. Нижний background накладывается на верхний с указанием позиции относительно блока. Тогда псевдоэлемент не нужен.

Answer 4

[Равшан Абдулаев]

используйте transform вместо border, htmlbook.ru/blog/treugolniki-cherez-css, тогда можно будет использовать фон.

Answer 5

[Валерий Серов]

Короче все просто делаешь 2 дива с position:absolute и даешь им такие стили :

div__left {
position: absolute;
widht: 100%;
left: -100%;
margin-right: 20px;
}

div__right {
position: absolute;
widht: 100%;
right: -100%;
margin-left: 20px;
}

и уже в этих дивах пилишь треугольники.

Писал стили без реальной проверки ну смысл я думаю донес!

И не помни про картинки до последнего - это скилл!)

Answer 6

[Максим Будин]

гуглите css triangle

Answer 7

[trushka]

#fourth-page:before {
    content: '';
    position: absolute;
    bottom: -40px;
    left: calc(50% - 40px);
    border-left: 50px solid *розовый*;
    border-right: 50px solid *розовый*;
    border-top: 35px solid transparent;
    background: *тот же, что у верхней полоски, подогнать  позицию*
}