Niuke.com DAY2 (вопросы по программированию)

Рождество наступает! Пожалуйста, используйте CSS, чтобы сделать рождественскую елку для ваших друзей~ Описание этой рождественской елки выглядит следующим образом:
1. "topbranch" - это верхняя ветвь рождественской елки. Атрибуты бордюра: ширина 100px, прямая линия, зеленый цвет (цвет бордюра, который не отображается, прозрачный) 2.
"middleBranch" - средняя ветвь елки, которую можно реализовать только через бордюр атрибут. Атрибуты бордюра: ширина 200px, прямая линия, зеленый цвет (цвет не показанного бордюра прозрачный) 3.
"база" это ствол елки, который центрируется на средних ветвях и выходит только через левое поле. Ширина и высота ствола 70px и 200px соответственно, цвет серый.
Примечание:
1. Центрирование верхних ветвей, листьев и стволов достигается через левое поле
2. Границы, которые не отображаются, их свойства все прозрачны (свойства)
3. Все настройки свойств границы выполняются только через пограничная собственность

Рендеринг выглядит следующим образом

 Далее давайте завершим эту простую елочку.

На первом этапе нам нужно построить три блока, чтобы представить работу верхней ветви, средней ветви и нижнего корня дерева соответственно.

        <section class="topbranch"></section>
        <section class="middleBranch"></section>
        <section class="base"></section>

Далее приступаем к созданию стиля

css-стиль

Чтобы сделать треугольник, нам нужно сделать три его стороны невидимыми.

Эффект средних ветвей и листьев такой же, как и выше, но требуется размер границы

Корню дерева ниже нужно только задать высоту и ширину. Устанавливается простая новогодняя елка.

.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;
            }