#circle {
background: red;
border-radius: 70px;
height: 100px;
width: 100px;
}
#oval1 {
background: yellow;
border-radius: 100px / 50px;
height: 100px;
width: 200px;
}
#oval2 {
background: SandyBrown;
border-radius: 50px / 100px;
height: 160px;
width: 80px;
}#trapezium1 {
border-right: 40px solid transparent;
border-bottom: 80px solid Aquamarine;
border-left: 40px solid transparent;
height: 0;
width: 80px;
}
#trapezium2 {
border-top: 80px solid Coral;
border-right: 40px solid transparent;
border-left: 40px solid transparent;
height: 0;
width: 80px;
}
#parallelogram {
background: pink;
height: 75px;
width: 130px;
-moz-transform: skew(20deg);
-webkit-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
}#up-triangle {
border-right: 60px solid transparent;
border-bottom: 80px solid green;
border-left: 60px solid transparent;
height: 0;
width: 0;
}
#down-triangle {
border-top: 80px solid pink;
border-right: 60px solid transparent;
border-left: 60px solid transparent;
height: 0;
width: 0;
}
#left-triangle {
border-top: 50px solid transparent;
border-right: 100px solid orange;
border-bottom: 50px solid transparent;
height: 0;
width: 0;
}
#right-triangle {
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid red;
height: 0;
width: 0;
}#octagon {
background: DarkTurquoise;
height: 100px;
width: 100px;
}
#octagon:before {
border-bottom: 30px solid DarkTurquoise;
border-right: 30px solid #101921; /* el color del fondo */
border-left: 30px solid #101921; /* el color del fondo */
content:"";
height: 0;
position: absolute;
width: 40px;
}
#octagon:after {
border-top: 30px solid DarkTurquoise;
border-right: 30px solid #101921; /* el color del fondo */
border-left: 30px solid #101921; /* el color del fondo */
content:"";
height: 0;
margin: 70px 0 0 0;
position: absolute;
width: 40px;
}
#diamond {
background: SkyBlue;
height: 80px;
width: 80px;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}#twelve-point-star {
background: orange;
height: 100px;
position: absolute;
width: 100px;
}
#twelve-point-star:before {
background: orange;
content:"";
height: 100px;
position: absolute;
width: 100px;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
#twelve-point-star:after {
background: orange;
content:"";
height: 100px;
position: absolute;
width: 100px;
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
#six-point-star {
border-bottom: 80px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
position: absolute;
height: 0;
width: 0;
}
#six-point-star:after {
border-top: 80px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
content:"";
height: 0;
margin: 30px 0 0 -50px;
position: absolute;
width: 0;
}#speech-bubble {
background: Thistle;
border-radius: 10px;
height: 80px;
position: absolute;
width: 120px;
}
#speech-bubble:before {
border-top: 13px solid transparent;
border-right: 26px solid Thistle;
border-bottom: 13px solid transparent;
content:"";
height: 0;
margin: 13px 0 0 -25px;
position: absolute;
width: 0;
}#pacman {
border-top: 60px solid yellow;
border-right: 60px solid transparent;
border-bottom: 60px solid yellow;
border-left: 60px solid yellow;
border-radius: 60px;
height: 0px;
width: 0px;
}#heart {
position: relative;
}
#heart:before, #heart:after {
background: red;
border-radius: 50px 50px 0 0;
content: "";
height: 115px;
left: 70px;
position: absolute;
top: 0;
width: 70px;
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-moz-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-moz-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}REFERENCIAS:CSS3 Shapes
10 comentarios:
nice one master :)
got you \m/
Jorge, ésto me encanta! a jugar con la imaginación, claro luego que dejás los códigos.
Preparate, tengo unas bombitas de agua, si ya sé está lloviendo por todos lados, igual a jugar al carnaval :D
Divertido para jugar, si :D
En cuanto a las bombitas, Graciela; serán bienvenidas porque acá, la lluvia se hace esperar; las nubes dicen que mientras haya este calor, no piensan venir, se rehusan :D
Hola JMiur. Off topic. en este blog
www.polikratos.blogspot.com tenemos colocado el truco expandir y contraer archivos. Descubrimos con el cambio de plantilla que al desplegar las fuentes son muy chicas. No logramos manejar el tamaño de la fuente. El problema -según se puede ver- está en los títulos de los post que son más pequeños que el de los días.
Atentos saludos, gracias por el socorro!
Claudio:
Eso ocurre porque en la plantila, está definido del tamaño de las fuentes de la sideba de este modo:
.sidebar li {
font-size: 80%;
.....
}
Lo cuál es un problema ya que es el 80% ¿de qué? Una solución general sería cambiar eso por un valor expresado en pixeles como:
font-size: 11px;
Otra forma. Agregar uan refla especial para ese gadget; algo así:
#BlogArchive1 li {
font-size: 12px;
}
Pensando que llovía allí, por suerte aquí se alinearon los planetas: nubes de los cuatro puntos cardinales y nada por muchos días, un calor insoportable de esos! calorononón...ahora con camperita.
Ya haré pases mágicos, envío el frescor a tu casa :D
Llegó, llegó, llegó, llegó, llegó. Sus pases mágicos son efectivos ... casi que me asusta :O
:D
Que buena entrada, entretenerse toca :)
como inserto una de esas figuras en mi blog? tengo un blog de pruebas y quiero probarlo. Dirección: http://elblogdelaspruebasesgenial.blogspot.com/
Saludos, G2
Ahí están als reglas de estilo, las colocas en una etiqueta style y luego colocas un div con esa regla:
<style>
#nombre{ ........ }
</style>
<div id="nombre"></div>
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...