組件實作：Demo

一、前言

今天要來介紹的東西是「與繪畫相關的東西 - CSS 和 SVG」，CSS 來製作圖形是一件很常見的事情，至於為什麼會特別的提及 SVG 呢？其實是因為之前在這個 CodePen 看到了一堆看起來有規則數字，很好奇這些參數代表什麼意義？以及該如何產生？查了以後才知道這些是SVG 的 Path 所使用的參數。 Path 【1】是 SVG 最強大的功能，它可以繪出直線、曲線、或是圓弧等線條，以下分別對於兩種用程式產出圖片的方法各別介紹。

在 CodePen 上很常出現 SVG 的用法，在開始學習 SVG 之前，應該會對語法感到困惑，所以才想趁此機會學習一些關於繪圖的基本用法。

二、CSS 基本圖形繪製

在進入 SVG 之前想先來介紹用 CSS 繪製圖形 ，基本圖形的繪製我是參考這篇【1】裡面介紹的，大多會是一些基本的形狀，像是什麼正方形、三角形、心型，進階一點還有無限符號、太極符號、外星怪獸．．．等等。

2.1 正方型、長方形、圓形、橢圓形

這類圖形屬於基本，只需帶入width與height（寬度和高度）就行了，而正方形的 width 和 height 只要設定相同值即可。圓形的部分，只要先產生正方形後，再加入border-radius:50%就可以搞定。橢圓形參數比較特別，order-radius的值要是寬高的一半，就是border-radius: (width/2) / (height/2)。

background: dodgerblue;淺藍色（道奇藍）

CSS：（正方形）

.square {
  width: 100px;
  height: 100px;
  background: dodgerblue;
}

CSS：（長方形）

.rectangle {
  width: 200px;
  height: 100px;
  background: dodgerblue;
}

CSS：（圓形）

.circle {
  width: 100px;
  height: 100px;
  background: dodgerblue;
  border-radius: 50%
}

CSS：（橢圓形）

.oval {
	width: 200px;
	height: 100px;
	background: dodgerblue;
	border-radius: 100px / 50px;
}

2.2 各種三角形

CSS：（三角形-向上）

.triangle-up {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 100px solid dodgerblue;
}

CSS：（三角形-向下）

.triangle-down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid dodgerblue;
}

CSS：（三角形-向左）

.triangle-left {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-right: 100px solid dodgerblue;
	border-bottom: 50px solid transparent;
}

CSS：（三角形-向右）

.triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 100px solid dodgerblue;
	border-bottom: 50px solid transparent;
}

CSS：（三角形-向左上）

.triangle-topleft {
	width: 0;
	height: 0;
	border-top: 100px solid dodgerblue;
	border-right: 100px solid transparent;
}

CSS：（三角形-向右上）

.triangle-topright {
	width: 0;
	height: 0;
	border-top: 100px solid dodgerblue;
	border-left: 100px solid transparent;
}

CSS：（三角形-向左下）

.triangle-bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid dodgerblue;
	border-right: 100px solid transparent;
}

CSS：（三角形-向左下）

.triangle-bottomright {
	width: 0;
	height: 0;
	border-bottom: 100px solid dodgerblue;
	border-left: 100px solid transparent;
}

終於不用去想三角形的方向了，只要代入語法一點點就好。

2.3 平行四邊形、愛心、訊息框

CSS：（平行四邊形）

.parallelogram {
	width: 150px;
	height: 100px;
	transform: skew(20deg);
	background: dodgerblue;
}

skew 為偏度，如果只有一個值，代表 X 軸偏移，可參考這裡【3】。

CSS：（愛心）

.heart {
	position: relative;
	width: 100px;
	height: 90px;
}

.heart:before,
.heart:after {
	position: absolute;
	content: "";
	left: 50px;
	top: 0;
	width: 50px;
	height: 80px;
	background: dodgerblue;
	border-radius: 50px 50px 0 0;
	transform: rotate(-45deg);
	transform-origin: 0 100%;
}

.heart:after {
	left: 0;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
}

愛心是由一個正方形轉 45 度，外加兩個半圓形所組成，特別的是這些半圓形是由偽元素所生成。有了這個愛心寫法，以後不一定要用 icon 來產生了。

CSS：（訊息框）

.talkbubble {
	width: 120px;
	height: 80px;
	background: dodgerblue;
	position: relative;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.talkbubble:before {
	content: "";
	position: absolute;
	right: 100%;
	top: 26px;
	width: 0;
	height: 0;
	border-top: 13px solid transparent;
	border-right: 26px solid dodgerblue;
	border-bottom: 13px solid transparent;
}

2.5 無限符號、緞帶勳章、電視屏幕

CSS：（無限符號）

.infinity {
	position: relative;
	width: 212px;
	height: 100px;
	box-sizing: content-box;
}

.infinity:before,
.infinity:after {
	content: "";
	box-sizing: content-box;
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 60px;
	border: 20px solid dodgerblue;
	border-radius: 50px 50px 0 50px;
	transform: rotate(-45deg);
}

.infinity:after {
	left: auto;
	right: 0;
	border-radius: 50px 50px 50px 0;
	transform: rotate(45deg);
}

CSS：（緞帶勳章）

.badge-ribbon {
	position: relative;
	background: dodgerblue;
	height: 100px;
	width: 100px;
	border-radius: 50px;
}

.badge-ribbon:before,
.badge-ribbon:after {
	content: "";
	position: absolute;
	border-bottom: 70px solid dodgerblue;
	border-left: 40px solid transparent;
	border-right: 40px solid transparent;
	top: 70px;
	left: -10px;
	transform: rotate(-140deg);
}

.badge-ribbon:after {
	left: auto;
	right: -10px;
	transform: rotate(140deg);
}

CSS：（電視屏幕）

.tv {
	position: relative;
	width: 200px;
	height: 150px;
	margin: 20px 0;
	background: dodgerblue;
	border-radius: 50% / 10%;
	color: white;
	text-align: center;
	text-indent: 0.1em;
}

.tv:before {
	content: "";
	position: absolute;
	top: 10%;
	bottom: 10%;
	right: -5%;
	left: -5%;
	background: inherit;
	border-radius: 5% / 50%;
}

2.6 小精靈、太空侵略者

CSS：（小精靈）

.pacman {
	width: 0px;
	height: 0px;
	border-right: 60px solid transparent;
	border-top: 60px solid dodgerblue;
	border-left: 60px solid dodgerblue;
	border-bottom: 60px solid dodgerblue;
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	border-bottom-left-radius: 60px;
	border-bottom-right-radius: 60px;
}

CSS：（太空侵略者）

.space-invader {
	box-shadow: 0 0 0 1em dodgerblue, 0 1em 0 1em dodgerblue,
		-2.5em 1.5em 0 0.5em dodgerblue, 2.5em 1.5em 0 0.5em dodgerblue,
		-3em -3em 0 0 dodgerblue, 3em -3em 0 0 dodgerblue, -2em -2em 0 0 dodgerblue,
		2em -2em 0 0 dodgerblue, -3em -1em 0 0 dodgerblue, -2em -1em 0 0 dodgerblue,
		2em -1em 0 0 dodgerblue, 3em -1em 0 0 dodgerblue, -4em 0 0 0 dodgerblue,
		-3em 0 0 0 dodgerblue, 3em 0 0 0 dodgerblue, 4em 0 0 0 dodgerblue,
		-5em 1em 0 0 dodgerblue, -4em 1em 0 0 dodgerblue, 4em 1em 0 0 dodgerblue,
		5em 1em 0 0 dodgerblue, -5em 2em 0 0 dodgerblue, 5em 2em 0 0 dodgerblue,
		-5em 3em 0 0 dodgerblue, -3em 3em 0 0 dodgerblue, 3em 3em 0 0 dodgerblue,
		5em 3em 0 0 dodgerblue, -2em 4em 0 0 dodgerblue, -1em 4em 0 0 dodgerblue,
		1em 4em 0 0 dodgerblue, 2em 4em 0 0 dodgerblue;
	background: dodgerblue;
	width: 1em;
	height: 1em;
	overflow: hidden;
	margin: 50px 0 70px 65px;
}

太空侵略者 CSS 內的 box-shadow 可以寫成這樣也是蠻厲害的，我特別佩服能把 CSS 當小畫家來用的人．．．

補上 HTML 的寫法。

HTML：

<div class="container">

	<div class="square all"></div>
	<div class="oval all"></div>

	<div class="triangle-up all"></div>
	<div class="triangle-down all"></div>
	<div class="triangle-left all"></div>
	<div class="triangle-right all"></div>
	<div class="triangle-topleft all"></div>
	<div class="triangle-topright all"></div>
	<div class="triangle-bottomleft all"></div>
	<div class="triangle-bottomright all"></div>

	<div class="parallelogram all"></div>
	<div class="heart all"></div>
	<div class="talkbubble all"></div>

	<div class="infinity"></div>
	<div class="badge-ribbon"></div>
	<div class="tv"></div>

	<div class="pacman"></div>
	<div class="space-invader"></div>

</div>

顯示結果：

三、SVG 的 Path

SVG 指的是「可縮放矢量圖形」，簡單說就是一種不管什麼縮放，像素都不會失真的圖。

path 元素可以用，

阿勒勒，今天狀態不佳啊，只能先 Coming Soon 了．．．

四、推薦資源

1. The Shapes of CSS
2. SVG 完整教學 31 天
3. CSS 奇思妙想 | Single Div 繪圖技巧
4. 用 CSS 畫畫的小技巧

五、結論

雖然標題是寫「SVG Path 急速入門」反而更像是進入 SVG 之前的前置作業，因為我把重點放在第二章，反而 SVG 就沒有更深入的研究，然後，為了因應雙十節到來，想說就畫個國旗應景一下，做法可以參考【4】【5】【6】。越到快到放假，越是感到忙碌，每天都會擔心文章會不會翻車。希望雙十連假期間，能順利的產出文章，如果你是一起比賽的朋友們，希望我們能一起堅持完賽！GoGo！

關於推薦資源的第 2 項，看完應該可以對 SVG 有更深入的認識，雖然我也還在學習的路上。

六、參考資料

1. Paths - SVG: Scalable Vector Graphics - MDN Web Docs
2. 用CSS繪製最常見的40種形狀和圖形
3. CSS 2D Transforms
4. 中華民國國旗
5. 使用HTML與純CSS繪製的中華民國國旗
6. [新手向]教你一步步用CSS畫出中華民國國旗 | 貨真價實的教學文啊XD