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

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

.bubble {
  height: 100px;
  width: 200px;
  border: 3px solid gray;
  background: lightgray;
  position: relative;
  cursor:pointer;
}
.triangle {
  width: 0;
  border-top: 20px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  cursor:pointer;
}

<div class="bubble">Speech bubble
</div>
<div class="triangle">
</div>

Ответ 1

Чтобы добиться этого, вы должны рассмотреть возможность изменения вашей разметки, чтобы повысить эффективность вашего 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;
}

<div class="oneAndOnlyDiv">Main div</div>

Ответ 2

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;
}

<svg class="bubble" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
  <g class="bubble-shape" style="cursor:pointer; pointer-events:visibleFill;">
    <rect x="10" y="10" width="90" height="90" rx="15" ry="15" />
    <polygon points="20,94 40,94 30,105" />
  </g>
</svg>

Ответ 3

Я нашел этот замечательный сервис для создания настраиваемых стрелок CSS. Просто сгенерируйте его и используйте с любым блоком.

http://www.cssarrowplease.com/