Voici une astuce simple pour faire des pointes de marqueurs en CSS.

Exemple simple :
 

Pour obtenir ce résultat nous allons de manière simple jouer avec les bordures d'une div.

Étape 1

Pour commencer, nous allons faire une div avec juste une bordure de 20px :

  #pointer { 
    width: 50px; 
    height: 50px; 
    border-color: red; 
    border-style: solid; 
    border-width: 20px; 
  }

Nous obtenons :
 

Étape 2

Afin de mieux voir l'astuce, nous allons maintenant mettre des couleurs différentes pour chacun des côtés, puis réduire à 0 la hauteur et la largeur de la div :

 #pointer { 
   width: 0; 
   height: 0; 
   border-color: red yellow blue green; 
   border-style: solid; 
   border-width: 20px; 
 }

Cela donne :
 

Étape 3

Maintenant que nous avons 4 triangles, il suffit tout simplement de changer la couleur en transparent des côtés qui ne nous intéressent pas :

 #pointer { 
   width: 0; 
   height: 0; 
   border-color: red transparent transparent transparent; 
   border-style: solid; 
   border-width: 20px; 
 }

Ainsi, nous n'avons plus que le triangle que l'on voulait :
 

Exemple avec CSS3

Après avoir vu comment faire des pointes marqueur simples, nous pouvons aller un peu plus loin et ajouter une couche de CSS3. Nous allons ajouter des transformations à notre div afin d'obtenir ce marqueur :
 

Dans un premier temps, nous appliquons une rotation de 90° puis nous allons faire une déformation avec scale, ce qui nous donnera un triangle ayant un angle beaucoup plus aigu.

 #pointer { 
   width: 0; 
   height: 0; 
   border-color: red transparent transparent transparent; 
   border-style: solid; 
   border-width: 20px;
   
   transform: rotate(-90deg) scale(3, 1);
   -webkit-transform: rotate(-90deg) scale(3, 1); 
   -moz-transform: rotate(-90deg) scale(3, 1);
  }