Para lograr esto, debe considerar alterar su marcado para hacer que su html sea más eficiente. Esto se puede lograr usando un pseudo elemento. Abordaré cada punto individualmente, y lo pondré todo junto al final de mi respuesta.

En primer lugar, {[36]]}

Use pseudo elementos para evitar elementos adicionales

Podría usar un pseudo elemento para eliminar el div adicional .triangle. Esto no solo reduce sus números div, sino que también ayuda con el posicionamiento que puede usar las top: left: right: y bottom: propiedades css con el fin de posicionar de acuerdo con su elemento principal. Esto se puede ver a continuación:

.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>

Hit testing

Con el fin de crear su "prueba de éxito", es posible que desee utilizar un elemento girado en lugar de un hack frontera.

Algo como:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 20px;
  height: 20px;
  width: 20px;
  background: black;
  transform: rotate(45deg);
  transform-origin:top right;
}

<div>Only element</div>

O utilice un pseudo elemento sesgado:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
}
div:before {
  content: "";
  position: absolute;
  top: 90%;
  left: 20px;
  height: 30%;
  width: 20px;
  background: black;
  transform: skewY(-45deg);
  transform-origin:bottom left;
  z-index:-1;
}

<div>Only element</div>

Que mostrará el puntero solo cuando el cuadrado o elemento principal se cierne. Pero espera, ¿eso arruina el posicionamiento? ¿cómo puedes lidiar con eso?

Hay algunas soluciones a eso. Una de ellas es usar la propiedad CSS calc.

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
}

<div>Only element</div>

Añadiendo un borde

Puede agregar un borde fácilmente ahora, simplemente agregando una declaración de borde al elemento principal, y estableciendo los border-bottom y border-right del pseudo elemento a inherit

Frontera

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
}

<div>Only element</div>

Caja De Sombra:

Para tener una sombra de caja, he usado el pseudo elemento :after para ocultar la sombra de caja sobre el otro pseudo, haciendo que el elemento parezca un solo elemento.

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  box-shadow: 5px 5px 10px 2px black;
}
div:before,div:after {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
z-index:-1;
  box-shadow:inherit;
}
div:after{
  box-shadow:none;
  z-index:8;
  }

<div>Only element</div>

Poniéndolo todo junto

También puede agregar un radio de borde a su cuadro de mensaje o burbuja de discurso nuevamente, utilizando el radio de borde propiedad:

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;
  border-radius:10px;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 10px); /*may require prefix for old browser support*/
  top: calc(100% - 10px); /*i.e. half the height*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
}

<div>Only element</div>

Esto incluso le permite crear no solo un triángulo, pero ¿qué tal un círculo en su lugar?

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor:pointer;
  border:3px double black;
  border-radius:10px;
}
div:before {
  content: "";
  position: absolute;
  top: -webkit-calc(100% - 13px); /*may require prefix for old browser support*/
  top: calc(100% - 13px); /*i.e. half the height + border*/
  left: 20px;
  height: 20px;
  width: 20px;
  background: gray;
  transform: rotate(45deg);
  border:3px double transparent;
  border-bottom:inherit;
  border-right:inherit;
  box-shadow:inherit;
  border-radius:50%;
}

<div>Only element</div>

Si tienes problemas con el contenido que se desborda y está 'oculto' detrás de este pseudo elemento, y no estás preocupado por tener un borde, podrías usar un índice z negativo que resolverá este problema.

¿No te gusta usar 'números mágicos'?

Si no te gusta la idea de usar un valor calc, en el que el posicionamiento en mi respuesta está utilizando actualmente (mientras se trabaja), es posible que desee utilizar transform:translate(50%)

Este sería un enfoque mucho mejor, ya que:

• No necesita saber el tamaño del borde, ni la mitad del ancho{[104]]}
• Hará que su cuadro de mensaje/ burbuja sea mucho más dinámico en su posicionamiento, y soportará más tamaños.

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 30px;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing:border-box;
  transform: rotate(45deg) translate(-50%);
  border-bottom: inherit;
  border-right: inherit;
  box-shadow: inherit;
}

<div>Only element</div>

¿Quieres moverlo? Usted ¡puedo!

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing: border-box;
  transform: rotate(45deg) translate(-50%);
  border-bottom: inherit;
  border-right: inherit;
  box-shadow: inherit;
  transition: all 0.8s;
}
div:hover:before {
  left: 90%;
}

<div>Only element</div>

¿Quieres uno de los correctos?

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border: 3px double black;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 15%;
  left: 100%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing:border-box;
  transform: rotate(45deg) translate(-50%);
  border-top: inherit;
  border-right: inherit;
  box-shadow: inherit;
  transition:all 0.8s;
}
div:hover:before{
  top:80%;
  }

<div>Only Element</div>

¿Quieres que sea una forma diferente de triángulo?

div {
  height: 100px;
  width: 200px;
  background: gray;
  position: relative;
  cursor: pointer;
  border-radius: 10px;
}
div:before {
  content: "";
  position: absolute;
  top: 70%;
  left: 100%;
  height: 20px;
  width: 20px;
  background: gray;
  box-sizing:border-box;
  transform:  translate(-50%) skewX(45deg);
  box-shadow: inherit;
  transition:all 0.8s;
  z-index:-1;
}
div:hover:before{
  transform:  translate(-50%);
  border-radius:50%;
  top:20%;
  }

<div>Only Element</div>