Cómo dibujar triángulos y paralelogramos usando CSS
El primer método: usar bordes
Un rectángulo une dos triángulos para formar un paralelogramo. ¿Por qué se pueden crear triángulos usando bordes? Veamos una imagen:
Después de observar el proceso de cambio de las tres pequeñas figuras en la imagen, ya deberías entender la mitad. De hecho, sólo se necesitan dos condiciones para modificar el triángulo: primero, la longitud y el ancho del elemento en sí son 0; segundo, el color del borde está configurado para ocultar las partes innecesarias; De manera similar, también puedes crear trapecios. El código para las tres formas en la imagen de arriba es el siguiente. (Ver también el ejemplo de CodePen, http://codepen.io/jerryzou/pen/mJYJym)
#first {
ancho:
alto: 20px;
ancho del borde: 10px;
estilo del borde: sólido;
color del borde: rojo verde azul marrón
#segundo {
ancho: 0;
alto: 0;
ancho del borde: 10px; >
estilo de borde: sólido;
color de borde: rojo verde azul marrón
}
#third {
alto:
ancho de borde: 10px;
estilo de borde: sólido
-color: rojo transparente transparente;
}
El siguiente paso es pensar en cómo formar un paralelogramo. En el método del borde, un paralelogramo consta de tres partes: un triángulo izquierdo, un rectángulo y un triángulo rectángulo. Crear tres elementos cada vez que se dibuja un paralelogramo es obviamente demasiado engorroso, por lo que los pseudoelementos :before y :after son una buena opción. Así es como logramos esto:
Para unir triángulos y rectángulos sin problemas, múltiples propiedades deben ser consistentes, así que use preprocesadores CSS como Less, Sass, Stylus, etc.) para facilitar este código. Para mantener, aquí está la versión Scss del código.
(Aquí está la versión Scss del código (enlace a CodePen, http://codepen.io/jerryzou/pen/ZGNGWZ?editors=110)
// Ancho y alto del triángulo
$height: 24px;
$width: 12px;
// Asigna colores a las tres partes del paralelogramo
@mixin paralelogramo- color( $color) {
fondo: $color;
amp;: antes { border-color: transparente $ color $color transparente }
amp; ;: after { border-color: $color transparent transparent $color }
}
// Estilo de un solo triángulo
@mixin Triangle() {
} p>
contenido: '';
pantalla: bloque
ancho:
alto: 0;
posición: absoluta;
estilo de borde: 0;
}
// estilo paralelogramo
.para {
visualización: bloque en línea;
posición: relativa;
relleno: 0 10px; $altura;
altura de línea: $altura;
margen izquierdo: $ancho;
color: # fff; amp;: después de {
@include Triangle();
derecha: -$width;
}
amp;: antes {
@include triángulo();
izquierda:-$ancho;
}
@include paralelogramo-color(rojo) ;
}} Cabe señalar que si la pendiente del triángulo establecido por $height y $width es demasiado pequeña o demasiado grande, puede causar una apariencia irregular, por lo que es importante probar el efecto de diferentes anchos y alturas. Pruebe el efecto visual de diferentes anchos y alturas.
Método 2: usar la transformación
El método de usar la transformación para realizar un paralelogramo es que el efecto que vi cuando fui allí probablemente sea así:
Ver. Se sintió tan increíble después de eso. Resultó ser sólo el contorno exterior de un paralelogramo. (Porque el método 1 solo puede crear un paralelogramo con un efecto de relleno). Es muy sencillo de implementar, principalmente con la ayuda de transform: skew(...). Echemos un vistazo al código fuente.
lt; stylegt;
.city {
pantalla: bloque en línea
relleno: 5px 20px;
borde: 1px sólido #44a5fc;
color: # 333;
transformar: sesgar (-20deg); p>lt;/stylegt;
lt;div class="city"gt;Shanghailt;/divgt;Entonces obtenemos:
Ver
Imágenes, debes estar pensando:
¿Cómo es Shanghai?
No te preocupes, distorsionamos todo el div, lo que provocó que el texto en el medio también se inclinara, lo que obviamente no es el efecto que queríamos. Por lo tanto, necesitamos agregar un elemento interno e inclinarlo hacia atrás para obtener el efecto que queremos:
El código para lograr este efecto es el siguiente, acompañado de un ejemplo de CodePen (http:// /codepen.io/jerryzou/pen/BNeNwV?editors=110)
lt. stylegt;
.city {
display: inline-block;
relleno: 5px 20px;
borde: 1px sólido #44a5fc;
color: #333
transformación: sesgar(-20deg;
}
.ciudad div {
transformar: sesgar(20deg); lt;/stylegt;
lt;div class="ciudad"gt;
lt;divgt;Shanghailt;/divgt;
lt;/divgt; Resumen
El primer método usa el atributo de borde para eliminar el triángulo y finalmente obtiene un paralelogramo al empalmar tres elementos, mientras que el segundo método usa transform: skew para obtener el paralelogramo. En general, el segundo método requiere mucho menos código que el primero y es más fácil de entender. El único inconveniente es la imposibilidad de construir trapecios como los utilizados en la paginación de este sitio.
Espero que este artículo sea útil para todos. De hecho, también puedes obtener cuadrados, rectángulos y algunas formas equiláteras, y también puedes usar este método para completar.
Lectura recomendada:
Tutorial HTML y CSS para crear QQ Penguin
Usa CSS 3 para crear sombras largas
CSS para lograr dinamismo cara de gato