Что можно сделать с css фигурами?

Question

[Trow_eu]

Привет,

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

К примеру, берем треугольник

.triangle{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3em 3em 0 0;
  border-color: #f00 transparent transparent transparent;
}

Ссылку на него не повесишь, потому что ссылкой будет div с размером 0, 0. Ховер так же.
Тень кладется на содержащий бордеры прямоугольник и тд.
Картинку в бордер вставить можно, но смысла никакого так треугольную картинку делать))

Интересуют больше не юзкейсы (уголки в интерфейсе), а какие вообще есть возможные взаимодействия с бордерами нулевого дива?

Answer 1

[Виталий Киренков]

Вы про это habrahabr.ru/post/126207 ?

Comments

[Trow_eu]

угу, забыл ссылку поставить : )

[Виталий Киренков]

@Trow_eu ну по сути самая распространённая - треугольник. Он идёт обычно вместе с текстом, и всё это оборачивается ссылкой. Удобно модифицировать, не открывая фотошоп и не привлекать дизайнера. Плюс - грузиться моментально, и нет запроса на сервак по загрузке изображения..

[Trow_eu]

@DeLaVega юзкейс понятен, видимо ничего больше не придумаешь и для треугольных ссылок нужен уже svg/canvas

[Виталий Киренков]

@Trow_eu А что вам ещё нужно то?) Вас сильно смущает пустое пространство, если это обернуть в тэг А. Если проблема в этом, то можете изваратиться со свойствами rotate и overflow: hidden, в итоге сможете добиться желаемого результата.

[Trow_eu]

@DeLaVega меня ничего не смущает, исключительно тешу любопытство. вдруг сам не додумался до каких-то взаимодействий =)

Answer 2

[Дмитрий Клусевич]

Всякие декоративные штуки. Например треугольники можно использовать как элемент "болунов-сообщений". Разные ситуации, разные решении и иногда такие вещи помогают)