A CodePen by geronimo.

script.js

//trece es la cantidad de cajas y tengo en principio 13 cajas con un arreglo de 13 posiciones donde tenemos la palabra hola en trece distintos idiomas escribe a mi correo si necesitas que te explique algo saludos... gramirezcarrero@gmail.com
var myCounter = 0;
var elements, i=0;

while(myCounter < 13){
	//document.write("myCounter = " + myCounter);
	//document.write(linebreak);
  var caja= document.createElement('div');
  var etiqueta = document.createElement('div');
  var texto = document.createElement('div');
  var j = myCounter + 1;
  caja.innerHTML = '<p>'+j+'</p>';
  caja.setAttribute('id',myCounter);
  caja.setAttribute('class','box');
  
  etiqueta.setAttribute('class','ship');
  
  texto.setAttribute('id','T'+myCounter);
  texto.setAttribute('class','texto');
 
  document.body.appendChild(caja);
  document.getElementById(myCounter).appendChild(etiqueta);
  document.getElementById(myCounter).appendChild(texto);
	myCounter++;
}
var contenido;
var hasta = 0 ;
var arr=["hola","hello","مرحبا","Բարեւ Ձեզ","salve","здраво","こんにちは","saluton","bonjour","hujambo","ಹಲೋ","bok","你好"];
while(hasta < 13){
             
contenido = document.createElement('p');
contenido.innerHTML= arr[hasta];
document.getElementById('T'+hasta).appendChild(contenido);  
hasta++;
}




//--- google font
WebFontConfig = {
    google: { families: [ 'Kavoon::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

style.css

.box{
  
  width:200px;
  height:100px;
  float:left;
  background:rgba(30,30,30,30.8);
  margin-left:5px;
  margin-bottom:5px;
  transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);
}
.box:hover{
transform: rotate(1deg) scale(0.88) skew(0deg) translate(0px);
-webkit-transform: rotate(1deg) scale(0.88) skew(0deg) translate(0px);
-moz-transform: rotate(1deg) scale(0.88) skew(0deg) translate(0px);
-o-transform: rotate(1deg) scale(0.88) skew(0deg) translate(0px);
-ms-transform: rotate(1deg) scale(0.88) skew(0deg) translate(0px);
background:#717D7D;
}
p{
padding-left:10px;
font-family:Arial;
color:white;
}
body{
background:white;
}
.ship{
  float:left;
  background:transparent;
  margin-top:-39px;
  margin-left:-41px;
  width:95px;
  height:20px;
  border-left: 30px solid transparent;
	border-right: 30px solid transparent;
  border-bottom: 30px solid white;
  transform: rotate(4deg);
  -webkit-transform: rotate(-45deg
    );

}
.texto{
 
  width:100%;
  height:80px;
  float:left;
  margin-top:-35px;
  letter-spacing:2px;
  

}
.texto p{
  color:white;
  font-family:Kavoon;
  font-size:16px;
  float:left;
  text-align:center;
  width:100%;

}