Introducción a las CSS shapes

Lo primero que tienen que aprender es cómo se forma una figura de CSS:


<style>
texto, muucho texto
</style>

El "texto, muucho texto" es esto:

.triangulo {
   border-color: transparent transparent red transparent;
   border-width: 0px 30px 30px 30px;
   border-style: solid;
   height: 0px;
   width: 0px;
}

Ahora vamos a analizarlo:
.triangulo <--- el nombre de la figura, le podés poner "AAA" si querés!
 { <--- el corchete de apertura, obligatorio


   border-color: transparent transparent red transparent;
   border-width: 0px 30px 30px 30px;                               <------ Las propiedades, dicen como va a ser la
   border-style: solid;                                                                      figura, en este caso un triángulo
   height: 0px;
   width: 0px;

} <--- corchete de "cerramiento", como yo le digo. Obligatorio

Bueno, en total nos queda:
<style>

.triangulo {
   border-color: transparent transparent red transparent;
   border-width: 0px 30px 30px 30px;
   border-style: solid;
   height: 0px;
   width: 0px;
}
</style>

Todo eso es solo para describir la figura: Un triángulo isóceles!!!
Ahora viene la parte de INSERTAR la figura! Le decís donde querés que esté... no se asusten, es fácil!

<div class="triangulo"></div>

Que es eso? Esto:

<div <--- El comienzo de la etiqueta "DIV"

class="triangulo" <--- Le decís que querés que sea todo lo que escribimos antes. Si en todo el texto de antes, donde dice "triangulo" pones "cacasfd", ahora acá tenés que escribir "class="cacasfd"

> <--- Cierra el comienzo de la etiqueta "DIV"

  <--- Nada, ahi dentro puede ir un texto, pero en este caso no.

</div> <--- El final de la etiqueta "DIV"

Bueno, ahora solo hay que crear un gadget llamado "HTML/JAVASCRIPT", y escribir toodo, o sea:

<style>

.triangulo {
   border-color: transparent transparent red transparent;
   border-width: 0px 30px 30px 30px;
   border-style: solid;
}
</style>


<div class="triangulo"></div>

El resultado:

Espero que hayan entendido!! La semana que viene, o mañana viene como hacer que se transformen!!
Hasta mañana, u otro día, quien sabe!