# CSS SECRETS 筆記 - Ch3 形狀
[竹白記事本](https://chupainotebook.blogspot.com/)，學習紀錄，2019/03/15。
###### tags: `CSS SECRETS` `css`
>[CSS Secrets](https://www.oreilly.com/library/view/css-secrets/9781449372736/?utm_medium=referral&utm_campaign=publisher&utm_source=oreilly&utm_content=buybox)
[CSS 秘密花園](https://www.w3cplus.com/blog/tags/502.html)
## [目錄 CSS SECRETS 筆記](https://hackmd.io/s/HyrK1S1YN)
Ch3 背景和邊框
1. [有彈性的橢圓形](#3-1-有彈性的橢圓形)
2. [平行四邊形](#3-2-平行四邊形)
3. [菱形圖片](#3-3-菱形圖片)
4. [剪角](#3-4-剪角)
5. [不規則四邊形頁籤](#3-5-不規則四邊形頁籤)
6. [簡單的圓餅圖](#3-6-簡單的圓餅圖)
## 3-1 有彈性的橢圓形
[`border-radius`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-radius) 使用絕對數值表示時，需要隨著尺寸改變而修改，如果使用百分比，就會隨著尺寸自動調整。
### 半橢圓形
水平半圓
```css
width: 200px;
height: 100px;
border-radius: 50% / 100% 100% 0 0;
```
垂直半圓
```css
width: 200px;
height: 100px;
border-radius: 100% 0 0 100% / 50%;
```
1/4 圓
```css
width: 200px;
height: 100px;
border-radius: 100% 0 0 0;
```
<iframe height="810" style="width: 100%;" scrolling="no" title="CSS SECRETS 3-1 半橢圓形" src="//codepen.io/CHUPAIWANG/embed/vPRNRX/?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/vPRNRX/'>CSS SECRETS 3-1 半橢圓形</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
### BonBon Sweet CSS3 Buttons
>[BonBon Sweet CSS3 Buttons](http://simurai.com/archive/buttons/)
---
## 3-2 平行四邊形
如果使用 `transform: skewX(-45deg)` 來變形元素，雖然可以達到所要的效果，但裡面的內容也會變形。
### 巢狀
在子元素加入一個反向的 `transform: skewX(45deg)`，反轉變形。
```css
.button {
background: #07434C;
transform: skewX(-45deg)
}
.button > div {
transform: skewX(45deg)
}
```
### 偽元素
```css
.button {
position: relative;
}
.button::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #07434C;
transform: skew(-45deg);
}
```
<iframe height="265" style="width: 100%;" scrolling="no" title="CSS SECRETS3-2 平行四邊形" src="//codepen.io/CHUPAIWANG/embed/aMYNNE/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/aMYNNE/'>CSS SECRETS3-2 平行四邊形</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## 3-3 菱形圖片
菱形圖片有以下兩種處理方式：
### 1. 變形
```htmlmixed
<div class="picture">
<img src="photo.jpg" alt="..." />
</div>
```
```css
.picture {
width: 200px;
transform: rotate(45deg);
overflow: hidden;
}
.picture>img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
```
### 2. 剪裁路徑 `clip-path`
>[clip-path 工具](https://bennettfeely.com/clippy/)
```css
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
```
<iframe height="400" style="width: 100%;" scrolling="no" title="CSS SECRETS 3-3 菱形圖片" src="//codepen.io/CHUPAIWANG/embed/jJzwNL/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/jJzwNL/'>CSS SECRETS 3-3 菱形圖片</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
---
## 3-4 剪角
設計中常用的樣式。
### 1. `linear-gradient`
單一角
```css
background: linear-gradient(-45deg, transparent 15px, #F2F3E9 0);
```
四角
```css
background:
linear-gradient(135deg, transparent 15px, #F2F3E9 0) top left,
linear-gradient(-135deg, transparent 15px, #F2F3E9 0) top right,
linear-gradient(45deg, transparent 15px, #F2F3E9 0) bottom left,
linear-gradient(-45deg, transparent 15px, #F2F3E9 0) bottom right;
background-size: 50% 50%;
background-repeat: no-repeat;
```
### 2. 內圓角
```css
background:
radial-gradient(circle at top left, transparent 15px, #F5B05E 0) top left,
radial-gradient(circle at top right, transparent 15px, #F5B05E 0) top right,
radial-gradient(circle at bottom left, transparent 15px, #F5B05E 0) bottom left,
radial-gradient(circle at bottom right, transparent 15px, #F5B05E 0) bottom right;
background-size: 50% 50%;
background-repeat: no-repeat;
```
### 3. 剪裁路徑 `clip-path`
>[clip-path 工具](https://bennettfeely.com/clippy/)
```css
clip-path: polygon(
20px 0%, calc(100% - 20px) 0%,
100% 20px, 100% calc(100% - 20px),
calc(100% - 20px) 100%, 20px 100%,
0% calc(100% - 20px), 0% 20px);
```
<iframe height="600" style="width: 100%;" scrolling="no" title="CSS SECRETS 3-4 剪角" src="//codepen.io/CHUPAIWANG/embed/QomZJG/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/QomZJG/'>CSS SECRETS 3-4 剪角</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## 3-5 不規則四邊形頁籤
不規則四邊形頁籤設計甚至比平行四邊形還來得常見。
方法與平行四邊形差不多，運用偽元素加上變形效果、圓角：
```css
.tab {
position: relative;
display: inline-block;
padding: .5em 1em .35em;
font-size: 1.6em;
color: #FFF;
}
.tab::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
border-radius: .5em .5em 0 0;
background: #99B58D;
transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}
```
<iframe height="200" style="width: 100%;" scrolling="no" title="CSS SECRETS 3-5 不規則四邊形頁籤" src="//codepen.io/CHUPAIWANG/embed/YgaRQX/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/YgaRQX/'>CSS SECRETS 3-5 不規則四邊形頁籤</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
## 3-6 簡單的圓餅圖
計時器、統計圖表都需要用到圓餅圖。
### 1. 變形解法
<iframe height="600" style="width: 100%;" scrolling="no" title="CSS SECRETS 3-6 變形解法" src="//codepen.io/CHUPAIWANG/embed/qvoQJE/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
See the Pen <a href='https://codepen.io/CHUPAIWANG/pen/qvoQJE/'>CSS SECRETS 3-6 變形解法</a> by CHUPAIWANG
(<a href='https://codepen.io/CHUPAIWANG'>@CHUPAIWANG</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>
### 2. SVG 解法
Sign in with Wallet
Connect another wallet