La utilización de bordes gruesos en elementos de ancho y alto iguales a 0 provoca un curioso efecto que nos permite obtener zonas del color del borde con inclinaciones de 45 o 135º según el lado en que se produzcan al combinar los bordes izquierdo o derecho de un color con el superior y/o inferior de otro color. Gracias a esta combinación se ha obtenido la "flecha" roja que aparece al pasar el ratón sobre cada imagen.
Por si te parece mágico lo de las flechas observa atentamente el siguiente fragmento para ver de dónde salen esas inclinaciones de 45 o 135º.
<div
style="border-style: solid; border-color: rgb(255, 0, 0) rgb(255, 255,
0) rgb(0, 0, 255) rgb(0, 255, 0); border-width: 8px;">