Home/Blog/Blogueros/Javier Lusarreta/Figuras geométricas con css3: cuadrado,rombo

` Javier Lusarreta

Figuras geométricas con css3: cuadrado,rombo

[ 02/06/2014 11:51:47 - Modificado(03/06/2014 0:00:00)
a Javier Lusarreta

Os paso unos cuantos ejemplos de figuras que se pueden hace fácilmente con css3. COn un poco de imaginación podeis construir efectos, planetas, satélites.. para poneros en órbita

Las nuevas funcionalidades de HTML5 y CSS3 dan muchísima capacidad a los diseñadores web. A continuación os pongo algunos ejemplos. Espero que os sirvan.

Círculos y elipses

 
#circle { 
   width: 140px;
   height: 140px;
   background: green; 
   -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
   border-radius: 70px;
}
 
 
#oval {
   width: 200px; 
   height: 100px; 
   background: green; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}

 
 

Cuadrado, rectángulos, trapecios y rombos

 
#square {
   width: 140px; 
   height: 140px; 
   background: green; 
}

 
 
 
#trapezium {
   height: 0; 
   width: 80px;
   border-bottom: 80px solid green;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
}
 
 
#diamond {
   width: 80px; 
   height: 80px; 
   background: green;
   margin: 3px 0 0 30px;
   /* Rotate */
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /* Rotate Origin */
   -webkit-transform-origin: 0 100%;
   -moz-transform-origin: 0 100%;
   -ms-transform-origin: 0 100%;
   -o-transform-origin: 0 100%;
   transform-origin: 0 100%;
}
 
 
#rectangle {
   width: 140px; 
   height: 80px;
   background: green;
}
 

Triángulos

 
#up-triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}
 
 
#down-triangle { 
   width: 0; 
   height: 0;
   border-top: 80px solid green;
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}
 
 
#eq-triangle {
  width: 0;
  height: 0;
  border-bottom: 104px solid green;
  /* 104 = 120 * 0.866 */
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}
 
 
#right-triangle {
   width: 0;
   height: 0;
   border-left: 100px solid green;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}
 
 
#left-triangle {
   width: 0;
   height: 0;
   border-right: 100px solid green;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
}
 

Estrellas

 
#twelve-point-star {
   height: 100px;
   width: 100px;
   background: green;
   position: absolute;
}
#twelve-point-star:before {
   height: 100px;
   width: 100px;
   background: green;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(30deg);
   -webkit-transform: rotate(30deg);
   -ms-transform: rotate(30deg);
   -o-transform: rotate(30deg);
   transform: rotate(30deg);
}
#twelve-point-star:after {
   height: 100px;
   width: 100px;
   background: green;
   content:"";
   position: absolute;
   /* Rotate */
   -moz-transform: rotate(-30deg);
   -webkit-transform: rotate(-30deg);
   -ms-transform: rotate(-30deg);
   -o-transform: rotate(-30deg);
   transform: rotate(-30deg);
}
 

Otras Figuras

 
#speech-bubble {
   width: 120px; 
   height: 80px; 
   background: green;
   position: absolute;
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
}
#speech-bubble:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid green;
   border-bottom: 13px solid transparent;
   margin: 13px 0 0 -25px;
}
 
 
#egg {
   display:block;
   width:126px; 
/* width has to be 70% of height */
/* could use width:70%; in a square container */
   height:180px;
   background-color:green;

/* beware that Safari needs actual
 px for border radius (bug) */
   -webkit-border-radius:63px 63px 63px 63px/
   108px 108px 72px 72px;
   /* fails in Safari, but overwrites in Chrome */
   border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
 
 
#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid green;
  border-left: 60px solid green;
  border-bottom: 60px solid green;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

 
 
#biohazard {
  width: 0;
  height: 0;
  border-bottom: 60px solid black;
  border-top: 60px solid black;
  border-left: 60px solid green;
  border-right: 60px solid green;
  -moz-border-radius: 60px; 
  -webkit-border-radius: 60px; 
  border-radius: 60px;
}
 
 
#heart { 
	position: relative;
}
#heart:before, #heart:after {
	position: absolute;
  content: "";
	left: 70px; top: 0;
	width: 70px;
	height: 115px;
	background: green;
	-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%;
}
#heart: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%;
}

 
02/06/2014 11:51:47 - Modificado(03/06/2014 0:00:00)
Este sitio web utiliza cookies propias y de terceros para optimizar tu navegación, adaptarse a tus preferencias y realizar labores analíticas. Al continuar navegando aceptas nuestra Política de Cookies. ACEPTAR