Open in app

Sign in

Write

Sign in

如何用CSS繪製插圖（上）

Bonnie Shih
✨ 黑洞創造 BlackHole Creative ✨
Published in
15 min readJun 6, 2022

前言

HTML、CSS、Javascript是著名的網頁程式語言，三者著重的點不同，HTML負責網站架構、CSS負責美化、Javascript負責賦予網站進一步的動態效果，如下圖很生動地解釋了三者在網站程式中不同的職位。

https://commondenominator.email/javascript-seo-making-your-bot-experience-as-good-as-your-user-experience/

本系列分為上下兩集，上集利用HTML 和CSS 繪製角色，下集會進一步為角色製作動畫🌟

草圖規劃

在寫程式之前，我先使用Figma繪製插圖，方便之後寫程式的時候對照間距與形狀大小、圓角等。

程式

首先在HTML加入container物件，它是一個要放置怪物角色的盒子。

<div class="container"></div>

在CSS中，我們要決定的是.container的尺寸（500px * 500 px）與顏色(#45DDE7)。

另外，我也更改了整個網頁的背景色為 #A2EDF2（非必要）。

body {
  background-color: #a2edf2;
}
.container {
  height: 500px;
  width: 500px;
  background-color: #45dde7;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

其中以下的作用是讓container置中。

  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);

以下則是置中我們即將繪製的物件。

  display: flex;
  align-items: center;
  justify-content: center;

效果會是這樣子（截圖呈現會有色差）：

衣服＆身體

接著我們先拆解這個角色的服裝，jacket-back是置於圖層最下層的，所以會跟其他三塊分開製作。

這裡我們在CSS中繼續寫下：

.jacket-back {
  height: 80px;
  width: 200px;
  background-color: #3c0f51;
  border-radius: 100px 100px 0px 0px;
  position: absolute;
  bottom: 110px;
}

同時記得在<div class=”container”></div>中加上<div class=”jacket-back”></div>。

<div class="container">
  <div class="jacket-back"></div>
</div>

效果是這樣：

再來是怪物身體！

在CSS中繼續寫上以下內容，圓角是為了配合帽子的圓角。

.monster {
  position: relative;
  height: 280px;
  width: 152px;
  background-color: #9e3ecc;
  border-radius: 20px 20px 0px 0px;
}

在<div class=”container”></div>中加上<div class=”monster”></div>

<div class="container">
  <div class="jacket-back"></div>
  <div class="monster"></div>
</div>

效果是這樣：

再來我們繼續繪製衣服的前面部分。

在CSS中，先繪製一個虛擬的框 .jacket 幫助我們排列，再在其中放置前面提到的三個物件。

.jacket {
  position: absolute;
  bottom: 0px;
  left: -10px;
  width: 171px;
  height: 134px;}
.jacket-l,.jacket-r {
 width: 85px;
 height: 85px;
 background: #3c0f51;
 top: 0px;
 position: absolute;
}
.jacket-l{
 -webkit-clip-path: polygon(0% 42%, 12% 100%, 100% 100%);
 left: 0px;
}
.jacket-r {
 -webkit-clip-path: polygon(100% 42%, 0% 100%, 89% 100%);
 right: 0px;
}
.jacket-front {
  height: 50px;
  width: 152px;
  background-color: #3c0f51;
  position: absolute;
  bottom: 0px;
  left: 10px;
}

在<div class=“monster”></div>中加入以下內，這樣衣服就做好了👻

<div class="jacket">
   <div class="jacket-front"></div>
   <div class="jacket-l"></div>
   <div class="jacket-r"></div>
</div>

小補充，不規則三角形的程式可以參考 運用 clip-path 的純 CSS 形狀變換 這篇文章學習更多！

眼睛＆嘴巴

在CSS中繼續寫入以下內容，繪製眼球與瞳孔👀，一樣建立好眼球的位置，再在其中放入瞳孔。

.eye-r,
.eye-l {
  height: 60px;
  width: 60px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 100px;
}
.eye-r {
  left: 16px;
}
.eye-l {
  left: 76px;
}
.pupil-r,.pupil-l {
 height: 24px;
 width: 24px;
 background-color: #3c0f51;
 border-radius: 50%;
 position: absolute;
 top: 18px;
 left: 18px;
}

在HTML中，在剛剛的<div class=”jacket”></div>下方加上以下程式：

<div class="eye-r">
   <div class="pupil-r"></div>
</div>
<div class="eye-l">
   <div class="pupil-l"></div>
</div>

接著在CSS的<div class=”eye-r”></div>、<div class=”eye-l”></div>中加上眼皮，並繪製嘴巴。

.eyelid-r {
  height: 30px;
  width: 60px;
  background-color: #cf90ed;
  border-radius: 30px 30px 0px 0px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.eyelid-l {
  height: 30px;
  width: 60px;
  background-color: #cf90ed;
  border-radius: 30px 30px 0px 0px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.mouth {
  height: 4px;
  width: 24px;
  background-color: white;
  position: absolute;
  top: 166px;
  left: 64px;
}

在<div class=”eye-r”></div>、<div class=”eye-l”></div>中分別加入左右眼皮，並在下方加入嘴巴。

<div class="eye-r">
   <div class="pupil-r"></div>
   <div class="eyelid-r"></div>
</div>
<div class="eye-l">
   <div class="pupil-l"></div>
   <div class="eyelid-l"></div>
</div>
<div class="mouth"></div>

帽子

已經來到最後一步了！我們要為怪物戴上帽子，帽子拆成三個部分：

以下是在CSS中要加上的程式碼🎩

.hat {
  position: absolute;
  top: 0px;
  left: -12px;
}
.hat-top {
  height: 52px;
  width: 152px;
  background-color: #3c0f51;
  position: absolute;
  top: 0px;
  left: 12px;
  border-radius: 20px 20px 0px 0px;
}
.hat-mid {
  height: 10px;
  width: 152px;
  background-color: #45dde7;
  position: absolute;
  top: 42px;
  left: 12px;
}
.hat-bottom {
  height: 28px;
  width: 176px;
  background-color: #3c0f51;
  position: absolute;
  top: 52px;
  left: 0px;
}

HTML：

<div class="hat">
      <div class="hat-top"></div>
      <div class="hat-mid"></div>
      <div class="hat-bottom"></div>
</div>

最終成果

程式統整

CSS：

body {
  background-color: #a2edf2;
}
.container {
  height: 500px;
  width: 500px;
  background-color: #45dde7;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}.jacket-back {
  height: 80px;
  width: 200px;
  background-color: #3c0f51;
  border-radius: 100px 100px 0px 0px;
  position: absolute;
  bottom: 110px;
}
.monster {
  position: relative;
  height: 280px;
  width: 152px;
  background-color: #9e3ecc;
  border-radius: 20px 20px 0px 0px;
}
.jacket {
  position: absolute;
  bottom: 0px;
  left: -10px;
  width: 171px;
  height: 134px;}
.jacket-l,.jacket-r {
 width: 85px;
 height: 85px;
 background: #3c0f51;
 top: 0px;
 position: absolute;
}
.jacket-l{
 -webkit-clip-path: polygon(0% 42%, 12% 100%, 100% 100%);
 left: 0px;
}
.jacket-r {
 -webkit-clip-path: polygon(100% 42%, 0% 100%, 89% 100%);
 right: 0px;
}
.jacket-front {
  height: 50px;
  width: 152px;
  background-color: #3c0f51;
  position: absolute;
  bottom: 0px;
  left: 10px;
}.eye-r,
.eye-l {
  height: 60px;
  width: 60px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 100px;
}
.eye-r {
  left: 16px;
}
.eye-l {
  left: 76px;
}
.pupil-r,.pupil-l {
 height: 24px;
 width: 24px;
 background-color: #3c0f51;
 border-radius: 50%;
 position: absolute;
 top: 18px;
 left: 18px;
}
.eyelid-r {
  height: 30px;
  width: 60px;
  background-color: #cf90ed;
  border-radius: 30px 30px 0px 0px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.eyelid-l {
  height: 30px;
  width: 60px;
  background-color: #cf90ed;
  border-radius: 30px 30px 0px 0px;
  position: absolute;
  top: 0px;
  left: 0px;
}
.mouth {
  height: 4px;
  width: 24px;
  background-color: white;
  position: absolute;
  top: 166px;
  left: 64px;
}.hat {
  position: absolute;
  top: 0px;
  left: -12px;
}
.hat-top {
  height: 52px;
  width: 152px;
  background-color: #3c0f51;
  position: absolute;
  top: 0px;
  left: 12px;
  border-radius: 20px 20px 0px 0px;
}
.hat-mid {
  height: 10px;
  width: 152px;
  background-color: #45dde7;
  position: absolute;
  top: 42px;
  left: 12px;
}
.hat-bottom {
  height: 28px;
  width: 176px;
  background-color: #3c0f51;
  position: absolute;
  top: 52px;
  left: 0px;
}

HTML：

<div class="container">
  <div class="jacket-back"></div>
  <div class="monster">
    <div class="jacket">
      <div class="jacket-front"></div>
      <div class="jacket-l"></div>
      <div class="jacket-r"></div>
    </div>
    <div class="eye-r">
      <div class="pupil-r"></div>
      <div class="eyelid-r"></div>
    </div>
    <div class="eye-l">
      <div class="pupil-l"></div>
      <div class="eyelid-l"></div>
    </div>
    <div class="mouth"></div>
    <div class="hat">
      <div class="hat-top"></div>
      <div class="hat-mid"></div>
      <div class="hat-bottom"></div>
    </div>
  </div>
</div>

結語

上集到這裡先告一個段落，下集會繼續為怪物做手槍&加入動畫。

下集連結：如何用CSS繪製插圖（下）

CSS
HTML
Cssdrawing

--

--

Bonnie Shih
✨ 黑洞創造 BlackHole Creative ✨

Written by Bonnie Shih

5 Followers
Writer for

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams