CSS寫燈籠

.lantern {
width: 200px; /* 燈籠的寬度 */
height: 400px; /* 燈籠的高度 */
padding: 20px; /* 燈籠的內邊距 */
background-color: #f2c03d; /* 燈籠的顏色 */
border-radius: 10px; /* 燈籠的圓角 */
position: relative;
}
.lantern::before,
.lantern::after {
content: "";
display: block;
position: absolute;
width: 100px; /* 燈籠頂部和底部圖案的寬度 */
height: 100px; /* 燈籠頂部和底部圖案的高度 */
background-color: #fff; /* 燈籠頂部和底部圖案的顏色 */
}
/* 燈籠頂部圖案 */
.lantern::before {
top: -50px; /* 位于燈籠頂部 */
left: 50px; /* 居中于燈籠 */
border-radius: 50% 50% 0 0; /* 使用圓角來繪制三角形 */
}
/* 燈籠底部圖案 */
.lantern::after {
bottom: -50px; /* 位于燈籠底部 */
left: 50px; /* 居中于燈籠 */
border-radius: 0 0 50% 50%; /* 使用圓角來繪制三角形 */
}
/* 燈籠上的花格紋 */
.lantern::before,
.lantern::after,
.lantern div {
background-image:
linear-gradient(45deg, transparent 25%, #fff 25%),
linear-gradient(-45deg, transparent 25%, #fff 25%),
linear-gradient(45deg, #fff 25%, transparent 25%),
linear-gradient(-45deg, #fff 25%, transparent 25%);
background-size: 20px 20px; /* 花格紋的大小 */
background-position: 0 0, 0 10px, 10px -10px, -10px 0px; /* 花格紋的位置 */
transform: scale(1.4); /* 放大花格紋 */
}
/* 燈籠上的內容 */
.lantern div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 水平和垂直居中 */
width: 150px; /* 內容的寬度 */
text-align: center; /* 文字居中 */
font-size: 24px; /* 字體大小 */
color: #fff; /* 字體顏色 */
text-shadow: 1px 1px 1px #8c8c8c; /* 添加文字陰影 */
z-index: 1; /* 置于頂層 */
}

這是一段CSS代碼，可以幫助我們繪制一個漂亮的燈籠效果。通過設置元素的寬度、高度、顏色、圓角等屬性，我們可以完成燈籠的基本外觀。

接著，我們使用偽元素(::before和::after)來繪制燈籠的頂部和底部圖案。使用border-radius屬性來繪制三角形，讓燈籠更有趣味和美觀。

最后，我們在燈籠上添加了一個花格紋效果，并在燈籠內部添加了文字內容。這樣，我們的燈籠就完成了。