Este un tema que me tiene negro esta tarde (bueno, ya noche xD).
Primerito dejo el jsfiddle con lo que explico: http://jsfiddle.net/soulchainer/Djk36/
El caso es que tengo dos navs, que contienen una lista con enlaces. Uno con links sociales y otro con links varios. Los links del segundo nav, que es el que me ocupa, tienen un par de efectos de css transform: skew y rotate.
Y el problema está en que al aplicarles este efecto, esos enlaces exceden a su contenedor (el contenedor no se ajusta en tamaño al contenido, el contenido sobresale).
Quiero que los contenedores se ajusten automáticamente al contenido transformado. De otra manera, este contenido que sobresale, al redimensionar la ventana del navegador, termina solapándose con otros elementos de la página. O con elementos de la propia lista (al exceder tanto el tamaño del parent, la etiqueta <li>, como de sus ancestors <ul> y <nav>.
El tamaño de la fuente y los bordes son a efectos de mejor visualización del problema.
Este nav está flotado a la derecha.
Obviamente quedan fuera de toda discusión soluciones que consistan en establecer valores absolutos de ancho-altura. Y también las referentes al uso de js/jquery, porque pregunto por hacer esto con css3 y html.
Muchas gracias por vuestro tiempo :)
EDITADO:
Como "solucion" provisional, he editado la regla .sitemenu li a esto:
.sitemenu li {
border: 1px solid black;
display: inline-block;
/*margin-right: .37em;
margin-top: 1em;*/
margin: 1em .37em 1em 0em;
position: relative;
right: 0em;
}(Gracias a +fernando calatayud en Google+ por apuntar esto, aún cuando yo ya lo sabía :p).
Esto es sólo una forma de esquivar el problema, de que parezca que este no existe.
No resuelve el problema real en absoluto, sólo fuerza a los elementos actuales a comportarse con el resto de contenido de la página. Si se cran etiquetas con texto más largo del actual o se cambia el tamaño de la fuente de las mismas, tendríamos que estar ajustando cada vez el tamaño del margen a ojo para compensarlo. Y no es lo más adecuado.
