Как такое сверстать?

Question

jertik @jertik

Как такое сверстать?

Как такое сверстать? Т.е. нужно сделать треугольный вырез над картинкой...

Update
Смотрю меня не совсем поняли.

Создайте страницу с фоновый изображением, в ней белый блок, и вырежьте в этом блоке вот такой треугольник.
P.S. Более того этот треугольник должен быть в аккурат под требуемым пунктом меню!

Всем спасибо, кто откликнется!

Update
https://jsfiddle.net/p5ffyLb8/

Вопрос задан более трёх лет назад
485 просмотров

1 комментарий

Подписаться 2 Средний 1 комментарий

Пригласить эксперта

Ответы на вопрос 4

2 комментария

1 комментарий

6 комментариев

jertik @jertik Автор вопроса

Это я знаю, но он ничего не вырежет. Создайте страницу с фоновый изображением, в ней белый блок, и вырежьте в этом блоке вот такой треугольник.
Более того этот треугольник должен быть в аккурат под требуемым пунктом меню!

Написано более трёх лет назад
jertik @jertik Автор вопроса

https://jsfiddle.net/p5ffyLb8/

Написано более трёх лет назад
Олег @nugget-ekb

jertik, треугольник должен быть однотонным или как?

Написано более трёх лет назад

Олег @nugget-ekb

jertik, добавить правильные стили и все будет, ок)))

span {
    margin-right: 20px;
    position: relative;
    padding: 21px 0;
}
span:before {
    content: '';
    position: absolute;
    left: 31%;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom: 6px solid #000;
}

Написано более трёх лет назад

jertik @jertik Автор вопроса

Олег, нет. Он должен как бы вырезать кусок, а под ним фоновое изображение

Написано более трёх лет назад
Олег @nugget-ekb

jertik, добавляем 2 черырехугольника, как это сделать написано, например, тут: https://habrahabr.ru/post/126207/

Написано более трёх лет назад

3 комментария

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- 4 часа назад
- 19 просмотров
0

ответов
CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- 8 часов назад
- 31 просмотр
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- 10 часов назад
- 49 просмотров
0

ответов
HTML

+1 ещё

Простой
Как добавить разный фон в ::before для объектов с одинаковым стилем?
- 1 подписчик
- 10 часов назад
- 19 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 11 часов назад
- 25 просмотров
1

ответ
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- 12 часов назад
- 52 просмотра
1

ответ
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- 17 часов назад
- 52 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 24 апр.
- 61 просмотр
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 24 апр.
- 69 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Подключить сервер к сети

27 апр. 2024, в 02:39

1500 руб./за проект

Необходимо сверстать приложение согласно макету Figma используя React

26 апр. 2024, в 22:22

1500 руб./за проект

Написать модуль подключения матрицы Sony к ПЛИС (Verilog)

26 апр. 2024, в 21:30

15000 руб./за проект

отправьте дизайнеру на доработку просто

Answer 1 · 2017-09-25 05:11:57

Андрей Федоров @aliencash

Партизан

https://codepen.io/aliencash/pen/ZXBMyL?editors=1100

Ответ написан более трёх лет назад

2 комментария

Answer 2 · 2017-09-25 03:55:28

ой всё @AnneSmith

самая ленивая

самое простое - png с прозрачностью
еще есть svg

Ответ написан более трёх лет назад

1 комментарий

Answer 3 · 2017-09-25 03:55:37

пункт_меню {
    position: relative;
}
пункт_меню:before {
    content: '';
    position: absolute;
    left: 45%;
    bottom: 0px;
    border: 10px solid transparent;
    border-bottom: 6px solid #000;
}

Answer 4 · 2017-09-25 05:25:41

Aligatro @Aligatro

Turn food and coffee into software...

https://jsfiddle.net/t7hahc3n/

Ответ написан более трёх лет назад

3 комментария

Как такое сверстать?

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

Минуточку внимания

Войдите на сайт