¡Se acerca la Navidad! Utilice CSS para hacer un árbol de Navidad para sus amigos ~ La descripción de este árbol de Navidad es la siguiente:
1. "topbranch" es la rama superior del árbol de Navidad. Los atributos del borde son: ancho 100 px, línea recta, color verde (el color del borde que no se muestra es transparente) 2.
"Rama intermedia" es la rama central del árbol de Navidad, que solo se puede realizar a través del borde atributo. Los atributos del borde son: ancho 200px, línea recta, color verde (el color del borde que no se muestra es transparente) 3.
"base" es el tronco del árbol de Navidad, que está centrado en las ramas medias y sale solo a través el margen izquierdo. El ancho y alto del tronco son 70px y 200px respectivamente, y el color es gris.
Nota:
1. El centrado de las ramas superiores, hojas y troncos se logra a través del margen izquierdo
2. Los bordes que no se muestran, sus propiedades son todas transparentes (propiedades)
3. Todos los ajustes de propiedades del borde se completan solo a través de la propiedad fronteriza
Las representaciones son las siguientes
A continuación, completemos este sencillo árbol de Navidad.
En el primer paso, necesitamos construir tres cajas para representar la operación de la rama superior y la rama media y la raíz inferior del árbol respectivamente.
<section class="topbranch"></section>
<section class="middleBranch"></section>
<section class="base"></section>A continuación, comience a construir el estilo.
estilo css
Para hacer un triángulo necesitamos hacer invisibles sus tres lados
El efecto de las ramas y hojas del medio es el mismo que el anterior, pero se requiere el tamaño del borde.
A la raíz del árbol de abajo solo se le debe dar la altura y el ancho. Se instala un árbol de Navidad simple.
.topbranch {
width: 0px;
height: 0px;
/*
* TODO: 上枝叶效果
*/
border: 100px solid green;
float: left;
margin-left: 100px;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
}
.middleBranch {
width: 0px;
height: 0px;
/*
* TODO: 中枝叶效果
*/
border: 200px solid green;
margin-left: 10px;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
}
.base {
/*
* TODO: 树干效果
*/
width: 70px;
height: 200px;
background-color: gray;
margin-left: 170px;
}