丑毛衣 CSS: Droids

I’m happy to translate the article for you, but I need the full text of the post (the parts you want translated) in order to do so. Could you please paste the article’s content here (excluding the source line you already provided)? Once I have the text, I’ll translate it into Simplified Chinese while preserving the original formatting, markdown, and any code blocks or URLs.

图标交换

第一件 CSS 丑毛衣采用了 BB‑8，所以我决定把这个球形机器人重新带回来。我使用了一些特殊字符来绘制它，并替换了通常出现在行尾的“领带战机”。

º❍

◦❍

º❍

.stitch p {
    transform: rotate(90deg);
}

毛衣模板

我从往年的毛衣模板开始——一个用于容纳主要角色的基本躯干（这次是机器人）。

<!-- sweater template markup -->

.wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.droids {
    width: 100%;
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

机器人布局

毛衣上有三个机器人：两个 BD‑72 单元和一个 Gonk 机器人。布局看起来有点像 TIE 战斗机。

<!-- droids layout markup -->

BD‑72 Droid

出现在*《曼达洛人》**（在 Peli Motto 的店里工作），并作为微型人偶包含在降临节日历中。*

The BD‑72 is built from rectangles (vertical and horizontal).

<!-- BD‑72 markup -->

.BD-72 {
    width: 200px;
    height: 300px;
    background-color: var(--sweatergreen);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Head */
.BD-72_head {
    width: 100px;
    height: 25px;
    background-color: var(--sweatergreen);
    border: 4px solid white;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* Neck & Legs */
.BD-72_neck,
.BD-72_leg {
    width: 8px;
    height: 10px;
    background-color: white;
}

/* Antenna */
.antenna {
    width: 6px;
    height: 18px;
    background-color: white;
}

/* Wrappers */
.antenna_wrapper {
    display: flex;
    justify-content: space-between;
}
.BD-72_leg_container,
.BD-72_feet_container {
    display: flex;
    justify-content: space-between;
}
.BD-72_feet_container {
    justify-content: space-evenly;
}

头部是一个带白色边框的绿色矩形。大多数部分共享相同的配色方案；某些部件（例如 “RedLights”）为红色。

Gonk 机器人

在《星球大战》宇宙中，Gonk 机器人是行走的电池。在 CSS 中，它们是一堆矩形。

初始（未使用容器）标记

<!-- initial Gonk markup -->

“这是一种签名吗？外星语言？” – 不，这是忘记父容器时的结果。

正确结构（带父容器）

<!-- proper Gonk markup with container -->

.Gonk_Body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

为各部分设置样式

/* Section 1 – top */
.Gonk_section1 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-bottom-color: transparent;
    border-radius: 5%;
}

/* Section 2 – middle (contains face) */
.Gonk_section2 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-bottom-color: transparent;
}

/* Section 4 – lower middle (contains button) */
.Gonk_section4 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-top-color: transparent;
}

/* Section 5 – bottom */
.Gonk_section5 {
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-top-color: transparent;
    margin-top: -5px;   /* overlap to hide the gap */
}

添加面部和按钮

.Gonk_face {
    width: 120px;
    height: 40px;
    background-color: var(--sweatergreen);
    border: 4px solid white;
    border-radius: 5%;
}

/* Example button */
.Button {
    width: 30px;
    height: 30px;
    background-color: white;
    border: 4px solid var(--sweatergreen);
    border-radius: 50%;
}

通过将部分边框设为透明并让各部分重叠，机器人轮廓变得清晰可见。

综合示例

三个机器人（两台 BD‑72 和一台 Gonk）坐在毛衣的躯干内部，组成一件节日星球大战主题的丑毛衣。CSS 只使用了简单的矩形、边框和 flexbox 定位——不需要任何图片。

随意复制代码，调整颜色（--sweatergreen 自定义属性在主样式表的其他位置定义），并添加你自己的机器人变体！祝编码愉快，愿 CSS 与你同在。

een);
    border: 4px solid white;
    border-radius: 5%;
    margin-top: -30px;
    position: relative;
}

.Button{
    height: 40px;
    width: 60px;
    background-color: var(--SweaterDarkRed);
    margin-top: 4px;
    margin-left: 5px;
}

Ugly sweater day 是每年十二月的第三个星期五。今年是 12 月 19 日，也就是今天。我本来并不是因为这个原因才打算今天发布的；这只是恰巧的时机。直到我重新阅读去年的帖子才发现这一点。

在 National Day Calendar 页面了解更多关于 Ugly Sweater Day 的信息。