在網頁中，經常會用到各種Icon，如果老是麻煩設計獅畫出來不免有些不好意思，所以有時候我們也可以用CSS寫出各種簡單的形狀，一來可以減輕他們的負擔，二來也可以使用CSS替代圖片，提高載入速度。

在網頁中，結合CSS能畫出來的最基本的形狀就是矩形，所以，我們可以在矩形的基礎上做出各種變換，得到很多不同的形狀。

這次的分享主要用到圓角、邊框、定位等知識點（鑑於IE9以上才支援圓角，暫時不考慮相容問題）

先做一些通用的基礎設定：

div {
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	margin: 100px;
	background-color: red;
}
 

<div>矩形</div>

下面針對矩形做一些變換：

圓形：

<div class="circle">圓形</div>

原理：四個角都是圓角：四個角的取值為50%或為寬和高一樣的值（此處即100px）。

.circle {
	border-radius: 50%;
}

<div class="semi-circle">半圓</div>

.semi-circle {
	border-radius: 100px 100px 0 0;
	height: 50px;
}

<div class="sector">扇形</div>

.sector {
	border-radius: 100px 0 0;
}

<div class="arc">弧形</div>

.arc{
		border-radius: 100px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

小三角：

<div class="triangle"></div>
<div class="arrow"></div>

.triangle{
		border: 50px solid green;
		width: 0;
		height: 0;
		border-top-color: yellow;
		border-right-color: blue;
		border-bottom-color: pink;
		border-left-color: orange;
	}
	.arrow{
		background: none;	/*為了清除前面div設定的背景顏色*/
		border: 50px solid red;
		width: 0;
		height: 0;
		border-color: red transparent transparent transparent;
	}

<div class="rectangle">疑問框</div>

/*圓角矩形*/
	.rectangle{
		width: 200px;
		border-radius: 15px;
		position: relative;
	}
	/*小三角*/
	.rectangle::before{
		content: "";
		width: 0;
		height: 0;
		border: 15px solid red;
		border-color: red transparent transparent transparent;
		position:absolute;
		bottom: -30px;
		left: 40px;
	}

Author：致知

Sign：路漫漫其修遠兮，吾將上下而求索。