Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

Formas geométricas con CSS. Primera Parte

11 abril, 2012
en CSS
0
Reglas CSS por defecto para los navegadores
Share on FacebookShare on Twitter

Vamos a ver una amplicación de las hojas de estilo para crear formas geométricas. Ya hemos visto en otro artículo como utilizar la propiedad border, ahora iremos un poquito más para crear otras formas geométricas.

Empezaremos por las formas más sencillas, cuadrado, rectángulo, triángulos en distintas posiciones… e iremos ampliando poco a poco los ejemplos

Para probar el código tu mismo, solamente tienes que copiar el estilo en tu página, crear un div para aplicar el estilo que has copiado. Por ejemplo, para hacer el cuadrado rojo te copias el código que ves mas abajo y creas un div al que aplicas el estilo cuadrado, es decir:

<div class=»cuadrado»></div>

Y haces lo mismo para el resto de ejemplos.

Resumen del Contenido

  • Cuadrado
  • Rectángulo
  • Circulo
  • Ovalo
  • Triángulo Arriba
  • Triángulo Derecha
  • Triángulo Abajo
  • Triángulo Izquierda
  • Triángulos Colores
  • Corazón

Cuadrado

.cuadrado {
width: 100px;
height: 100px;
background: red;}

Rectángulo

.rectangulo {
width: 200px;
height: 100px;
background: red;}

Circulo

.circulo {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;}

Ovalo

.ovalo {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;}

Triángulo Arriba

.triangulo-arriba {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;}

Triángulo Derecha

.triangulo-derecha {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}

Triángulo Abajo

.triangulo-abajo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

Triángulo Izquierda

.triangulo-izquierda {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;}

Triángulos Colores

.triangulo-colores {
width: 0;
height: 0;
border: 100px solid;
border-color: red green blue yellow;}

Corazón

.corazon {
position: relative;
width: 100px;
height: 90px;
}
.corazon:before,
.corazon:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.corazon:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
Etiquetas: bordercssformas geometricas
ANUNCIO
Post anterior

Los bordes con CSS y un limón

Próximo Post

Menus con CSS y listas

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Recomendados

¿Cómo ayuda un enlace a que tu página se posicione bien?

¿Qué es el link building?

5 noviembre, 2021
Como acceder a la administración de WordPress

Cómo activar multisitio en WordPress

4 enero, 2012
Infografía: Tabla periódica de plugins para wordpress

Infografía: Tabla periódica de plugins para wordpress

17 febrero, 2014
10 plugins para WordPress 3.3

10 plugins para WordPress 3.3

13 mayo, 2012

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .