Principio de dibujo de triángulo CSS-borde
Puedes usar el borde para implementar un triángulo en CSS, por ejemplo:
El efecto se muestra a continuación:
Entonces, ¿por qué establecer los tres lados del borde a transparente ¿Se puede producir un triángulo después de que sea transparente? A continuación analizamos paso a paso.
Veamos un ejemplo de un borde usado comúnmente:
Esta es la situación más común en la que usualmente usamos bordes; a menudo solo le damos al borde un ancho menor (generalmente 1- 2px); sin embargo, este uso diario puede fácilmente hacer que las personas malinterpreten la forma en que se forma el borde, es decir, piensen que el borde de un elemento está formado por cuatro bordes rectangulares.
Sin embargo, este no es el caso. De hecho, el borde de un elemento está compuesto por triángulos (trapecios equiláteros para ser precisos). Para ilustrar este problema, podemos aumentar el ancho del borde y establecer diferentes colores para cada lado del borde:
Renderizado. :
Podemos ver que los cuatro lados obvios no son rectangulares, sino trapezoidales, muy parecidos a los cuatro lados de un marco de fotos.
La parte inferior del trapezoide es la altura o el ancho correspondiente al div, la altura del trapezoide es el ancho del borde y la longitud del lado superior del trapezoide depende del espacio interno de el div.
Cambiamos aún más la altura y el ancho del div a 0, y el ancho del borde superior del trapezoide a 0, y se puede obtener el triángulo correspondiente.
Renderizado:
En este momento, el elemento se "empalma" de 4 triángulos arriba, abajo, izquierda y derecha y luego, para lograr el efecto final, es decir, para conservar el triángulo superior, también debería ser ¿Cómo se hace? Es muy sencillo, sólo necesitamos establecer el color de los demás lados del borde en blanco o transparente:
Renderizado:
Se dibuja el triángulo simple final. De la misma manera, si desea obtener triángulos en otros lados, solo necesita establecer el color de los lados restantes del borde en blanco o transparente.
Sin embargo, el borde superior "oculto" todavía ocupa espacio. Si desea minimizar el tamaño del triángulo dibujado, debe establecer el ancho del borde superior en 0 (lo mismo se aplica a otras situaciones). ):