Создание прямоугольных DIV со стрелками

Question

Я только начинаю больше понимать CSS, и первые эксперименты были действительно хорошими!Я нахожу свой канал с помощью всплывающих окон, стилей CSS и т. Д.!Однако я хочу немного расширить границы того, что знаю ...

Я пытаюсь создать стилизованный DIV (без проблем), который будет прямоугольным, но со стрелкой, указывающей на значокпанель навигации, см. изображение ниже, которая включает в себя границу поля, и где сама DIV может изменяться по высоте (хотя стрелка всегда остается одинаковой высоты / ширины).

Может ли кто-нибудь указать мне правильное направление - или я пытаюсь сделать больше, чем возможно!?

Спасибо, заранее.

Answer 1

vimeo.com фактически делает это с чистым CSS, за исключением того, что их стрелки указывают вниз. Хороший способ изучить новый CSS - это использовать Firefox + Firebug или просто Chrome и научиться «заимствовать» CSS у других сайтов.

Однажды я позаимствовал их стрелки вниз, и это сработало просто замечательно.

Answer 2

Для широкой поддержки браузера вы должны сделать это с фоновыми изображениями. Есть несколько ресурсов и учебных пособий, которые вы можете проверить. Я советую вам по этой книге:

• Pro CSS и HTML Design Patterns - Отличная книга, в которой есть раздел по стилизации div с изображениями bg ( код здесь - этот пример для закругленных углов, которые теперь можно достичь с хорошей поддержкой использования тегов CSS3, но дает понимание того, как добиться любого эффекта границы, который вы хотите)

И, конечно же, если вы поищете в Google стилистику div для фоновых изображений, вы найдете много примеров того, как добиться такого эффекта.