Cómo colocar texto dentro o sobre una figura CSS - Tutorial

Como parte del proceso de réplica de la página principal del blog que tengo en un servidor gratuito, he tenido que recurrir a ajustes de CSS que no conocía, y buscando algunos, no aparecen tal cual los necesitaba, así que es por eso que escribo este artículo.

El resultado que se quiere lograr es el de la imagen de arriba, colocar texto sobre una figura creada con CSS, para esto necesitaremos tener previamente nuestra figura correctamente posicionada en nuestro código CSS. En mi caso para lograr ese recuadro con la flechita hacia abajo el código es el siguiente:

<div id="talkbubble">
</div>
<style contenteditable="">
#talkbubble {
width: 283px;
height: 70px;
background: #152635;
position: absolute;
left: 17px;
top: 187px;
}
#talkbubble:before {
content:"";
position: absolute;
left: 44%;
top: 67px;
height: 0;
width: 0;
border-left: 13px solid transparent;
border-right: 13px solid transparent;
border-top: 13px solid #152635;
}
</style>
</div>

Resultado del código anterior, figura en CSS

Ahora ya con mi recuadro colocado y posicionado correctamente mediante los valores debajo de "position", me veo en la necesidad de agregarle texto adentro o sobre el. Como tal, no es posible colocar texto dentro de una figura hecha con CSS, pero Sí se puede colocar una caja de texto encima. Entonces, después del código de mi figura voy a escribir lo siguiente (Necesitas tener tu texto ya configurado con su formato y dentro de una etiqueta <ul class="navbar"> para que funcione con este código):

<style type="text/css">
body {
padding-left: 0em;
font-family: Georgia, "Times New Roman", Times, serif;
color: purple;
background-color: #d8da3d }
ul.navbar {
list-style-type: none;
padding: 0;
margin: 0;
position: absolute;
top: 185px;
left: 15px;
width: 18.5em }
h1 {
font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
ul.navbar li {
background: transparent;
margin: 0.5em 0;
padding: 0.4em;
ul.navbar a {
text-decoration: none }
</style>

Con este código lo que estoy haciendo es declarar las propiedades de color del texto, color de fondo, formato del link que quiero que esté dentro de la figura, y demás propiedades. Para posicionarlo solo basta con jugar con las medidas debajo de "position".

Y así, el resultado que se obtiene después de editar los colores del texto y demás, es este:

Figura en CSS con texto encima

Espero les haya servido tanto como a mí. Comentar es agradecer!!