“`css
.tree {
position: relative;
width: 150px;
height: 150px;
.tree > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
.tree > div:before,
.tree > div:after {
content: “”;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: red;
border-radius: 50% 50% 0 0;
transform: rotate(-45deg);
.tree > div:after {
left: 0;
transform: translate(0, 50%);
.tree > div {
display: inline-block;
vertical-align: top;
width: 100%;
height: auto;
.tree > div > div {
display: inline-block;
vertical-align: top;
width: 20px;
height: 20px;
background-color: green;
border-radius: 50% 50% 0 0;
transform: rotate(45deg);
.tree > div > div:nth-child(1) {
background-color: blue;
.tree > div > div:nth-child(2) {
background-color: yellow;
.tree > div > div:nth-child(3) {
background-color: orange;
.tree > div > div:nth-child(4) {
background-color: pink;
.tree > div > div:nth-child(5) {
background-color: purple;
.tree > div > div:nth-child(6) {
background-color: red;
上面的代码定义了一个 6 行圣诞树，其中第 2、4、6 行是彩灯。使用 `display: inline-block` 将每个彩灯设置为一个内联块元素，并使用 `border-radius` 属性设置彩灯的圆角。每个彩灯使用 `transform` 属性旋转 45 度。最后，使用 `background-color` 属性将每个彩灯的外部背景色设置为不同的颜色。
使用 CSS 可以轻松地创建一个漂亮的圣诞树，还可以根据需要添加其他装饰品，如彩灯、彩带、铃铛等。