CSS
Formas de un solo elemento
Buscar..
Cuadrado
Para crear un cuadrado, define un elemento con ancho y alto. En el siguiente ejemplo, tenemos un elemento con un width y height de 100 píxeles cada uno.
<div class="square"></div>
.square {
width: 100px;
height: 100px;
background: rgb(246, 156, 85);
}
triangulos
Para crear un triángulo CSS, defina un elemento con un ancho y alto de 0 píxeles. La forma del triángulo se formará usando propiedades de borde. Para un elemento con altura 0 y ancho, los 4 bordes (arriba, derecha, abajo, izquierda) forman cada uno un triángulo. Aquí hay un elemento con 0 altura / ancho y 4 bordes de diferentes colores.
Al establecer algunos bordes en transparente y otros en un color, podemos crear varios triángulos. Por ejemplo, en el triángulo hacia arriba, establecemos el borde inferior en el color deseado, luego establecemos los bordes izquierdo y derecho en transparente. Aquí hay una imagen con los bordes izquierdo y derecho sombreados ligeramente para mostrar cómo se está formando el triángulo.
Las dimensiones del triángulo se pueden modificar cambiando los diferentes anchos de borde: más alto, más corto, ladeado, etc. Los siguientes ejemplos muestran un triángulo de 50x50 píxeles.
Triángulo - apuntando hacia arriba
<div class="triangle-up"></div>
.triangle-up {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid rgb(246, 156, 85);
}
Triángulo - apuntando hacia abajo
<div class="triangle-down"></div>
.triangle-down {
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 50px solid rgb(246, 156, 85);
}
Triángulo - apuntando a la derecha
<div class="triangle-right"></div>
.triangle-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 50px solid rgb(246, 156, 85);
}
Triángulo - Señalando a la izquierda
<div class="triangle-left"></div>
.triangle-left {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-right: 50px solid rgb(246, 156, 85);
}
Triángulo - Apuntando hacia arriba / derecha
<div class="triangle-up-right"></div>
.triangle-up-right {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 156, 85);
border-left: 50px solid transparent;
}
Triángulo - hacia arriba / izquierda
<div class="triangle-up-left"></div>
.triangle-up-left {
width: 0;
height: 0;
border-top: 50px solid rgb(246, 156, 85);
border-right: 50px solid transparent;
}
Triángulo - apuntando hacia abajo / derecha
<div class="triangle-down-right"></div>
.triangle-down-right {
width: 0;
height: 0;
border-bottom: 50px solid rgb(246, 156, 85);
border-left: 50px solid transparent;
}
Triángulo - apuntando hacia abajo / izquierda
<div class="triangle-down-left"></div>
.triangle-down-left {
width: 0;
height: 0;
border-bottom: 50px solid rgb(246, 156, 85);
border-right: 50px solid transparent;
}
Ráfagas
Una ráfaga es similar a una estrella, pero con los puntos que se extienden menos distancia del cuerpo. Piense en una forma de ráfaga como un cuadrado con cuadrados adicionales, ligeramente girados, en capas en la parte superior.
Los cuadrados adicionales se crean utilizando los elementos ::before y ::after psuedo.
Ráfaga de 8 puntos
Una ráfaga de 8 puntos son cuadrados de 2 capas. El cuadrado inferior es el elemento en sí mismo, el cuadrado adicional se crea utilizando el :before pseudo-elemento. La parte inferior se gira 20 °, el cuadrado superior se gira 135 °.
<div class="burst-8"></div>
.burst-8 {
background: rgb(246, 156, 85);
width: 40px;
height: 40px;
position: relative;
text-align: center;
-ms-transform: rotate(20deg);
transform: rotate(20eg);
}
.burst-8::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: rgb(246, 156, 85);
-ms-transform: rotate(135deg);
transform: rotate(135deg);
}
Ráfaga de 12 puntos
Una ráfaga de 12 puntos son cuadrados de 3 capas. El cuadrado inferior es el elemento en sí mismo, los cuadrados adicionales se crean utilizando :before y :after pseudo-elementos. La parte inferior se gira 0 °, la siguiente casilla se gira 30 ° y la parte superior se gira 60 °.
<div class="burst-12"></div>
.burst-12 {
width: 40px;
height: 40px;
position: relative;
text-align: center;
background: rgb(246, 156, 85);
}
.burst-12::before, .burst-12::after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: rgb(246, 156, 85);
}
.burst-12::before {
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.burst-12::after {
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
Círculos y elipses
Circulo
Para crear un círculo , defina un elemento con un width y una height iguales (un cuadrado ) y luego establezca la propiedad de border-radius de este elemento en 50% .
HTML
<div class="circle"></div>
CSS
.circle {
width: 50px;
height: 50px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
Elipse
Una elipse es similar a un círculo, pero con diferentes valores para el width y la height .
HTML
<div class="oval"></div>
CSS
.oval {
width: 50px;
height: 80px;
background: rgb(246, 156, 85);
border-radius: 50%;
}
Trapecio
Un trapezoide se puede hacer con un elemento de bloque con altura cero (altura de 0px ), un ancho mayor que cero y un borde, que es transparente, excepto por un lado:
HTML:
<div class="trapezoid"></div>
CSS:
.trapezoid {
width: 50px;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid black;
}
Al cambiar los lados del borde, se puede ajustar la orientación del trapecio.
Cubo
Este ejemplo muestra cómo crear un cubo usando los métodos de transformación 2D skewX() y skewY() en pseudo elementos.
HTML:
<div class="cube"></div>
CSS:
.cube {
background: #dc2e2e;
width: 100px;
height: 100px;
position: relative;
margin: 50px;
}
.cube::before {
content: '';
display: inline-block;
background: #f15757;
width: 100px;
height: 20px;
transform: skewX(-40deg);
position: absolute;
top: -20px;
left: 8px;
}
.cube::after {
content: '';
display: inline-block;
background: #9e1515;
width: 16px;
height: 100px;
transform: skewY(-50deg);
position: absolute;
top: -10px;
left: 100%;
}
Pirámide
Este ejemplo muestra cómo crear una pirámide usando bordes y métodos de transformación 2D skewY() y skewY() rotate() en pseudo elementos.
HTML:
<div class="pyramid"></div>
CSS:
.pyramid {
width: 100px;
height: 200px;
position: relative;
margin: 50px;
}
.pyramid::before,.pyramid::after {
content: '';
display: inline-block;
width: 0;
height: 0;
border: 50px solid;
position: absolute;
}
.pyramid::before {
border-color: transparent transparent #ff5656 transparent;
transform: scaleY(2) skewY(-40deg) rotate(45deg);
}
.pyramid::after {
border-color: transparent transparent #d64444 transparent;
transform: scaleY(2) skewY(40deg) rotate(-45deg);
}