Речевой пузырь со стрелкой

У меня есть проект, где мне нужно вставить речевые пузыри / windows сообщений . Общая форма, которую я пытаюсь достичь, заключается в следующем:

Речевой пузырь CSS со стрелкой или треугольником

В настоящее время этот тест не проходит, так как прозрачная рамка также доступна для кликов.

Цели

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

  • Мне нужно отобразить форму над различным контентом (изображения, gradleиенты, текст …),

вопросы

Основные проблемы, которые возникают при манипулировании этой формой:

  • Имейте возможность перемещать треугольник вокруг речевого пузыря в соответствии с положением элемента, к которому он относится (верхняя / левая / правая / нижняя стороны)
  • добавление тени или frameworks вокруг него, когда требуется акцент

Есть ли способ решить эти проблемы?

Чтобы добиться этого, вы должны рассмотреть возможность изменения вашей разметки, чтобы повысить эффективность вашего html. Это может быть достигнуто с использованием псевдоэлемента. Я рассмотрю каждый пункт индивидуально и поместим все это в конце моего ответа.

Прежде всего,

Использование псевдоэлементов для исключения дополнительных элементов

Вы можете использовать .triangle для удаления дополнительного .triangle div. Это не только уменьшает ваши номера div, но также помогает с позиционированием, так как вы можете использовать свойства top: left: right: and bottom: css для размещения в соответствии с вашим основным элементом. Это можно увидеть ниже:

 .oneAndOnlyDiv { height: 100px; width: 200px; border: 3px solid gray; background: lightgray; position: relative; } .oneAndOnlyDiv:before { content: ""; position: absolute; top: 100%; left: 20px; width: 0; border-top: 20px solid black; border-left: 20px solid transparent; border-right: 20px solid transparent; } 
 
Main div

SVG

Это не проходит хит-тест, так как прозрачная рамка также доступна для кликов

Это можно сделать с помощью указателей-событий в svg.
pointer-events:visibleFill; Выберет только ту часть, где есть краска.

В этом примере используется filter_box-shadow и не поддерживается IE.
Также используется две формы.

 html, body { margin: 0; padding: 0; } .bubble { width: 150px; height: 150px; -webkit-filter: drop-shadow(5px 5px 0px #aaa); filter: drop-shadow(5px 5px 0px #aaa); } .bubble-shape { fill: #1e1; } .shape-text { color: black; } 
       
  • Цвет фона не отображается в предварительном просмотре
  • Почему мой Transform привязывается назад?
  • Левая выровненная последняя строка в центрированной сетке элементов
  • Изменение фонового изображения с помощью анимации CSS3
  • Фоновое изображение в ключевом кадре не отображается в Firefox или Internet Explorer
  • Могу ли я иметь несколько: перед псевдоэлементами для одного и того же элемента?
  • Размытый текст после использования CSS transform: scale (); в Chrome
  • Любой способ ограничить длину границы?
  • Как использовать вертикальное выравнивание в бутстрапе
  • Волнистая форма с css
  • Определенные края с помощью CSS3 Filter Blur
  • Давайте будем гением компьютера.