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

Question

[jenne]

Подскажите, пожалуйста, как правильно сделать вот эту треугольную выемку на белом фоне, с зеленой все ясно - псевдоэлементом (с позиционированием по центру), а у белой должет быть прозрачный фон т.к под ним тень и при открытии следующего пункта меню, он должен смещаться к следующей зеленой стрелке .

Comments

[Ankhena]

Треугольник верстаются:
- бордерами
- градиентами
- повернутым псевдо квадратиком
- svg
- ещё пачкой способов, которая легко гуглится по словам "css треугольники" и "css треугольники генератор"

[jenne]

да , но он должен быть прозрачный , чтоб видно было фон под блоком

[Ankhena]

jenne, по-моему, это во всех предложенных мною вариантах делается без проблем.

Что вы делаете и что не получается? Что именно остается непрозрачным? Оформите код в песочницу на codepen.io

[Сергей delphinpro]

Ankhena, Вырез в виде треугольника. там еще и тень у блока с вырезом, похоже присутствует.

[Ankhena]

Сергей delphinpro, по скрину и стрелкам кажется, что они выпирают из левого. В смысле, что они с зеленым типа вместе. Т.е. прозрачное это белое.

С вырезами я как-то делала песочницу, надо поискать.

[Ankhena]

jenne, вот вариации на тему
https://jsfiddle.net/Ankhena/kLr7onyb/
https://jsfiddle.net/Ankhena/6j4omned/
https://jsfiddle.net/Ankhena/5wvr2x4q/

Тут кругляшки, с треугольниками еще проще.

Answer 1

[Noder SS]

Спрятать под блок квадрат, повернутый на 45 градусов.

Comments

[Николай Савельев]

как же это бесит. все эти костыли, которые напрасно нагружают процессор

[Noder SS]

Николай Савельев, ну, я только так и делал всегда. Мне кажется, что какой-то там блок много не займет, относительно SVG картинок и прочего, но это просто мой вариант