Верстка нестандартных блоков без графики
Верстка нестандартных блоков без графики
Текст внутри дива
Наверное,
те, кому приходилось верстать такие блоки, наверняка применяли такую
схему: вырезали этот уголок и потом "приклеивали" его к основному
контейнеру.
Однако приведенный выше пример сверстан без использования какой-либо графики. Только живой CSS!
В это трудно поверить с первого взгляда, однако это так и есть.
Весь
секрет в использовании свойства границ блоков на пересечениях
образовывать любые углы, в зависимости от толщины пересекающихся границ.
В данном примере код выглядит так:
style="border-left: 10px solid #6e6e6e; border-bottom: 35px solid
#ffffff; padding: 10px; background: #6e6e6e; color: #ffffff;">Текст
внутри дива
Об этой технологии я прочитал на
каком-то блоге в эти выходные, но к сожалению, не помню, откуда именно.
Если кто-то подскажет ссылку на него, я с удовольствием упомяну ее
в этом посте.
Текст внутри дива
Наверное,
те, кому приходилось верстать такие блоки, наверняка применяли такую
схему: вырезали этот уголок и потом "приклеивали" его к основному
контейнеру.
Однако приведенный выше пример сверстан без использования какой-либо графики. Только живой CSS!
В это трудно поверить с первого взгляда, однако это так и есть.
Весь
секрет в использовании свойства границ блоков на пересечениях
образовывать любые углы, в зависимости от толщины пересекающихся границ.
В данном примере код выглядит так:
style="border-left: 10px solid #6e6e6e; border-bottom: 35px solid
#ffffff; padding: 10px; background: #6e6e6e; color: #ffffff;">Текст
внутри дива
Об этой технологии я прочитал на
каком-то блоге в эти выходные, но к сожалению, не помню, откуда именно.
Если кто-то подскажет ссылку на него, я с удовольствием упомяну ее
в этом посте.