Могу ли я сделать эту хлебную крошку с помощью css3?

Короче говоря, да, это возможно только с помощью CSS (даже без CSS2), но я бы настоятельно рекомендовал вам вместо этого использовать фоновые изображения.

разглагольствовать

Проблема с подобным CSS — это тени. То, как он отображает треугольник, — это просто граница, прозрачная на диагональных сторонах. Другими словами, ваша тень по-прежнему будет коробкой и не будет выглядеть так, как вы хотите.

Я часто вижу это, когда люди начинают использовать CSS3. Обычно они хотят, чтобы все делалось динамически, а не с фоновыми изображениями. И как только это будет сделано, появится множество CSS, которые почти ничего не сделают с эстетической точки зрения для страницы. На самом деле для достижения такого же эффекта с изображениями требуется всего 10-15% того, что у них получается.

С фоновыми изображениями проблем нет, они не выходят из моды и уж точно не перестанут работать в ближайшее время. Мой совет: придерживайтесь фоновых изображений там, где они нужны, и сохраните CSS3 для спецэффектов. Это звучит скучно и старомодно, но это работает и намного проще.

Это кажется относительно простым проектом CSS; просто, здесь, относительно, так как я видел, как люди делали анимированный Twitter Fail Whale только с помощью CSS.
Что вам нужно будет сделать для краев треугольника (что, как я полагаю, является сложной частью для вас) , используется матричное преобразование CSS (разработано на W3Schools), а затем просто используйте box-shadow для границ и box-shadow: inset для эффекта вставки. После этого просто используйте соответствующие отступы и выравнивание текста, чтобы центрировать текст в каждой части объекта.

РЕДАКТИРОВАТЬ Рассмотрите возможность использования псевдоэлементов before и after для достижения этой цели. В качестве альтернативы вы можете использовать две перекошенные <div>, расположенные друг над другом для каждой секции; однако это не даст вам привлекательной тени.

Я не думаю, что это возможно только с помощью CSS. Вам придется использовать фоновое изображение. Вы сможете создать эффект сужающихся краев, используя псевдоклассы :after и :before. Но столкнется с проблемой внутренней тени.

Однажды я пытался создать аналогичную цепочку, используя только css3, когда увидел навигационную цепочку в Справочном центре Google (которая похожа, но с использованием фонового изображения), но не смог этого сделать.

http://support.google.com/adsense/bin/answer.py?hl=ru&answer=1354760

Я попытался сделать это с помощью псевдоэлементов CSS (:after и :before), не добавляя никаких других элементов html.