Immix
@Immix

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

75c970c6fceb4a31b8d9a03696ef5559.PNG

Создаю через 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;
}


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

Надо как то наложить нижний фон на верхний что ли, но что бы розовый фон под треугольником не было видно. Короче не знаю как реализовать...
  • Вопрос задан
  • 531 просмотр
Пригласить эксперта
Ответы на вопрос 7
sadisme
@sadisme
font-size:30rem
В общих чертах. Правда с лишним дивом.
Ответ написан
Комментировать
@MrCheater
Full-Stack JS. В прошлом программист-олимпиадник
ну можно ведь по-человечески сверстать
зачем вот это left: calc(50% - 40px);
:-(
ну а если по делу - то придется лепить розовый фон так
[|||||||||||||||||||||||||]\/[|||||||||||||||||||||||||] поверх темной картинки
Ответ написан
@lexchz
Как вариант - 2 фона использовать. Верхний - текстура, нижний - розовый svg с вырезом. Нижний background накладывается на верхний с указанием позиции относительно блока. Тогда псевдоэлемент не нужен.
Ответ написан
Комментировать
ravshanium
@ravshanium
аналитик, веб-программист
используйте transform вместо border, htmlbook.ru/blog/treugolniki-cherez-css, тогда можно будет использовать фон.
Ответ написан
Комментировать
Короче все просто делаешь 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;
}


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

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

И не помни про картинки до последнего - это скилл!)
Ответ написан
Комментировать
гуглите css triangle
Ответ написан
Комментировать
trushka
@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: *тот же, что у верхней полоски, подогнать  позицию*
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы