Use CSS sin cerebro para hacer triángulos y aplicaciones avanzadas, ¡no diga que no sabe cómo hacerlo después de leerlo!

Uso avanzado de CSS

• A veces nos encontramos con los siguientes requisitos en desarrollo:
  
• Al observar la imagen de arriba, podemos ver que hay un triángulo que sobresale de la caja debajo del teléfono JD en la primera imagen; el rojo y el blanco en la segunda imagen están divididos por una línea diagonal, entonces, ¿cómo logramos este efecto? Después de leer este blog, ¡no digas que todavía no puedes! ! !

CSS para hacer triángulos

• En primer lugar, las cajas que solemos ver son así.
  

• Código:

    .box1 {
    	width: 100px;
    	height: 100px;
    	border: 1px solid red;
    	margin: 100px auto;
    }
  

• ¿Y si ensanchamos el borde de la caja? ¿Qué pasa si el ancho de su borde es de 50 píxeles? Se verá así.
  

• Código:

    .box1 {
    	width: 100px;
    	height: 100px;
    	border: 50px solid red;
    	margin: 100px auto;
    }
  

• ¿Qué pasa si cambio los colores de los cuatro bordes a colores diferentes?
  

• Código:

    .box1 {
    	width: 100px;
    	height: 100px;
    	border: 50px solid;
    	border-color: red blue green black;
    	margin:  100px auto;
    }
  

• Al ver esto, mis amigos pueden tener ideas, así que ¿debería reducir el ancho y la altura de la caja? ¿O no hay ancho ni alto?

• Código:

    .box1 {
    	width: 50px;
    	height: 50px;
    	border:  50px solid;
    	border-color:  red blue green black;
    	margin:  100px auto;
    }
  

• Código:

    .box1 {
    	width : 0;
    	height: 0;
    	border: 50px solid;
    	border-color: red blue green black;
    	margin:  100px auto;
    }
  

• Al ver esto, ¿no sale este triángulo? Así es, establece los colores de los otros tres bordes en un color transparente, ¿no es auténtico este triángulo?
  

• Código:

    .box1 {
    	width : 0;
    	height: 0;
    	border: 50px solid;
    	border-color: red transparent transparent transparent;
    	margin:  100px auto;
    }
  

para resumir:

• La plantilla del triángulo es la siguiente:

    .box {
    	width: 0;
    	height: 0;
    	border: 40px solid transparent;
    	border-top-color: red;
    }
  

• Descripción:

  1. Este método de escritura tiene el mismo significado que el método de escritura anterior, pero es más conciso y recomendado .
  2. El tamaño del triángulo solo necesita cambiar el ancho del borde.
  3. La dirección del triángulo debe modificarse al valor superior, superior opcional, inferior, izquierda, derecha.
  4. El color se puede modificar mediante el valor de border-top-color.

• Por lo tanto, el triángulo de la caja que sobresale de arriba se puede colocar directamente en la posición correcta de la caja grande colocándolo, y se realiza el efecto de sobresalir del triángulo de la caja.

Uso avanzado de triángulos CSS

• Entonces, ¿cómo hacemos este efecto?
  

• De hecho, consiste en una caja grande con dos cajas pequeñas adentro (la altura de las dos cajas pequeñas es la misma que la caja grande), y luego hay un triángulo rectángulo absolutamente posicionado en el borde derecho de la caja izquierda. y luego establezca el color del mismo color que el cuadro de la derecha. Eso es todo.
  
  

• A continuación analizamos cómo escribir el pequeño triángulo de la imagen de arriba.

• Primero mira la imagen:
  

• Código:

    .box1 {
    	width : 0;
    	height: 0;
    	border-width: 50px;
    	border-style: solid;
    	border-color: red blue green black;
    	margin: 100px auto;
    }
    
    下面的这种写法和上面是等价的
  
    .box1 {
    	width: 0;
    	height: 0;
    	border-width: 50px 50px 50px 50px;
    	border-style:  solid;
    	border-color:  red blue green black;
    	margin: 100px auto;
    }
  

• Aumentamos el ancho del borde superior y encontramos los siguientes patrones:
  

• Código:

    .box1 {
    	width: 0;
    	height: 0;
    	border-width:  150px 50px 50px 50px;
    	border-style:  solid;
    	border-color: red blue green black;
    	margin: 100px auto;
    }
  

• Al mirar la imagen, podemos ver que es más probable que el triángulo de la derecha se convierta en nuestro triángulo objetivo, por lo que reducimos el ancho del borde inferior a 0 y descubrimos que apareció el patrón que queríamos.
  

• Código:

    .box1 {
    	width : 0;
    	height: 0;
    	border-width:  150px 50px 0px 50px;
    	border-style:  solid;
    	border-color:  red blue green black;
    	margin:  100px auto;
    }
  

• Así que establecemos el ancho del borde izquierdo en 0 píxeles y el triángulo se vuelve más obvio.
  

• Código:

    .box1 {
    	width: 0;
    	height: 0;
    	border-width: 150px 50px Opx 0px;
    	border-style:  solid;
    	border-color:  red blue green black;
    	margin:  100px auto;
    }
  

• En este momento, solo necesita establecer el color del triángulo rojo en un color transparente (tenga en cuenta que el triángulo rojo es el borde superior), y el efecto es el siguiente.
  

• Código:

    .box1 {
    	width: 0;
    	height: 0;
    	border-width:  150px 50px Opx opx;
    	border-style : solid;
    	border-color: transparent blue green black;
    	margin:  100px auto;
    }
  

para resumir:

• El código CSS del triángulo azul es:

    .box1 {
    	width : 0;
    	height: 0;
    	border-width:  150px 50px 0 0;
    	border-style:  solid;
    	border-color: transparent blue transparent transparent;
    }
  

• Descripción:

  1. El primer parámetro de border-width establece la altura del triángulo y el segundo parámetro establece el ancho del triángulo.
  2. El color se puede modificar al color deseado en color de borde.

• Por lo tanto, solo necesita colocar el triángulo pequeño absolutamente a la derecha del cuadro de la izquierda, modificarlo a un tamaño apropiado y cambiar el color al color del cuadro de la derecha para lograr ese requisito.

Consejo:
Se utilizan muchos métodos de escritura compuestos en el código de caso. Si no está familiarizado con esto, puede leer mi otro blog: Resumen de métodos de escritura compuestos en HTML y CSS