CSS简笔画：纯CSS绘制一顶帽子

夏天，人人都希望有一顶漂亮的帽子吧？来，我送给你。

看图解构

帽子结构很简单，分为帽檐、帽冠、饰带、饰带上面有花朵

html帽子结构

<div class="cap">
  <!-- 帽冠 -->
  <div class="top">
    <!-- 饰带 -->
    <div class="lace">
      <!-- 花朵 -->
      <div class="flower">
        <!-- 花瓣 -->
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
        <div class="petal"></div>
      </div>
    </div>
  </div>
  <!-- 帽檐 -->
  <div class="bottom"></div>
</div>

CSS部分代码

1、帽檐、帽冠

.cap {
  position: relative;
}
.top{
  position: absolute;
  width: 120px;
  height: 116px;
  background: var(--capColor);
  border-radius: 100%;
  transform: rotateX(13deg) rotateY(15deg) rotateZ(14deg);
  top: -32px;
  left: 60px;
  z-index: 2;
}
.bottom{
  position: absolute;
  width: 210px;
  height: 110px;
  background: var(--capColor);
  border-radius: 100%;
  transform: rotateX(36deg) rotateY(15deg);
  z-index: 1;
}

利用transform: rotate，使其沿着 X/Y/Z 轴进行 3D 旋转，从而形成帽子的大致形状。

2、添加"饰带"

.lace{
  position: absolute;
  bottom: 27px;
  left: -24px;
  width: 170px;
  height: 120px;
  border: 14px solid var(--laceColor);
  border-radius: 50%;
}

利用border、border-radius加父元素的overflow: hidden，隐藏掉超出部分，形成"饰带"