Cómo usar CSS para controlar divs para dibujar triángulos y árboles de Navidad
Crear un nuevo documento de texto
Cree un nuevo documento de texto en el escritorio y asígnele el nombre "Triángulo", abra el nuevo documento de texto y configure el tipo de documento, encabezado, cuerpo y otros marcos en el HTML.
Tenga en cuenta que puede cambiarle el nombre a un archivo .html después de escribirlo.
2
Crea un div y usa el atributo de borde para controlarlo
Diseñe el div y asígnele el nombre id="tri", use CSS para controlar el div, en estilo, use El atributo de borde controla el div,
#tri{
ancho:
alto:
<; p> borde superior: 400 px rojo sólido;borde derecho: 400 px azul sólido
borde inferior: 400 px verde sólido
borde izquierdo; : 400px amarillo sólido;
}
Tenga en cuenta que la longitud y el ancho del div están establecidos en 0 y el borde es el borde. Verá las siguientes cuatro formas de triángulo.
3
Modifica y selecciona el triángulo que desees
El código anterior no dibuja un triángulo, sino cuatro triángulos. Simplemente cambia el color alrededor del borde. cámbielo a blanco, excepto el borde inferior: 100 px, verde sólido; cambie todos los demás a blanco y verá el siguiente efecto. Por supuesto, también puede ajustarlo según sus necesidades.
Además, puedes establecer los píxeles del borde superior en 0; hacer los otros dos lados más pequeños y establecer el color en blanco, de modo que solo verás un triángulo en la parte inferior.
Presta atención a elegir el efecto que deseas lograr en función de tu situación real. Los diferentes efectos en la Figura 1 y la Figura 2 se deben a diferentes configuraciones de los bordes.
4
El siguiente código es sólo de referencia:
lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//ES " " http://www.w3.org/TR/html4/loose.dtd"gt;
lt;htmlgt;
lt;headgt;
lt ;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"gt;
lt;titlegt;Ejercicio trigonométricolt;/titlegt;
lt; estilogt;
#tri{
ancho: 0px;
alto:
borde superior: 0px; blanco sólido
borde derecho: 100 px blanco sólido;
borde inferior: 400 px verde sólido
borde izquierdo: 100 px blanco sólido; p >
}
lt;/stylegt;
lt;/headgt;
lt;bodygt;
lt; div id="tri"gt;lt;/divgt;
lt;/bodygt;
lt;/htmlgt;
END
Dibuja un árbol de Navidad
Dibuja dos triángulos
Usando la base del triángulo de arriba, primero dibuja dos triángulos de diferentes tamaños.
#tri1{
ancho: 0px;
alto: 0px;
borde superior: 100px blanco sólido;
borde derecho: 100 px blanco sólido;
borde inferior: 100 px verde sólido;
borde izquierdo: 100 px blanco sólido;
}
#tri2{
ancho: 0px;
alto: 0px;
borde superior: 200px blanco sólido;
borde derecho: 200 px blanco sólido;
borde inferior: 200 px verde sólido;
borde izquierdo: 200 px blanco sólido
}
Utilice flotación y margen para ajustar a la posición adecuada
Haga flotar el primer triángulo pequeño para que cubra el segundo, luego use el valor del margen para ajustar la posición y finalmente muestre El contenido anterior del árbol de Navidad, el código es el siguiente y la imagen es la siguiente.
#tri1{
ancho: 0px;
alto: 0px;
borde superior: 100px blanco sólido;
borde derecho: 100 px blanco sólido;
borde inferior: 100 px verde sólido;
borde izquierdo: 100 px blanco sólido;
flotante : izquierdo;
margen izquierdo: 100px;
}
#tri2{
ancho: 0px; p>altura: 0px;
borde superior: 200 px blanco sólido;
borde derecho: 200 px blanco sólido;
borde inferior: 200 px verde sólido ;
border-left: 200px blanco sólido;
}
Dibuja el tronco de un árbol
Agrega un div llamado pie de página para controlarlo Tamaño, forma y color, y utilice el margen para ajustar la posición.
#footer{
ancho: 100px;
alto: 200px;
fondo: gris; margin-left: 150px;
}
Finalmente, luego del ajuste, se obtiene un árbol de Navidad.
Como se muestra en la siguiente figura
El código completo es el siguiente, solo como referencia
lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN " "http：/ /www.w3.org/TR/html4/loose.dtd"gt;
lt;html lang="en"gt;
lt;headgt;
lt;meta http-equiv="Content-Type" content="text/html;charset=UTF-8"gt;
lt;titlegt;Ejercicio del árbol de Navidadlt;/ títulogt;
lt; estilogt;
#header{
ancho: 0px; p>borde superior: 100 px blanco sólido;
borde derecho: 100 px blanco sólido;
borde inferior: 100 px verde sólido
borde izquierdo; : 100px blanco sólido
flotante: izquierdo
margen izquierdo:
}
#main{
ancho: 0px;
alto: 0px;
borde superior: 200 px blanco sólido;
borde derecho: 200 px blanco sólido <; /p>
borde inferior: 200 px verde sólido;
borde izquierdo: 200 px blanco sólido;
}
#footer{
ancho: 100px;
alto: 200px;
fondo: gris;
margen izquierdo: 150px; }
lt;/stylegt;
lt;/headgt;
lt;bodygt;
lt;div id="encabezado "gt;lt; /divgt;
lt;div id="main"gt;lt;/divgt;
lt;div id="footer"gt;lt;/ divgt;
lt;/bodygt;
lt;/htmlgt;