CSS SECRETS 筆記 - Ch3 形狀

竹白記事本，學習紀錄，2019/03/15。

tags: CSS SECRETS css

CSS Secrets
CSS 秘密花園

目錄 CSS SECRETS 筆記

Ch3 背景和邊框

1. 有彈性的橢圓形
2. 平行四邊形
3. 菱形圖片
4. 剪角
5. 不規則四邊形頁籤
6. 簡單的圓餅圖

3-1 有彈性的橢圓形

border-radius 使用絕對數值表示時，需要隨著尺寸改變而修改，如果使用百分比，就會隨著尺寸自動調整。

半橢圓形

水平半圓

width: 200px;
height: 100px;
border-radius: 50% / 100% 100% 0 0;

垂直半圓

width: 200px;
height: 100px;
border-radius: 100% 0 0 100% / 50%;

1/4 圓

width: 200px;
height: 100px;
border-radius: 100% 0 0 0;

BonBon Sweet CSS3 Buttons

BonBon Sweet CSS3 Buttons

---

3-2 平行四邊形

如果使用 transform: skewX(-45deg) 來變形元素，雖然可以達到所要的效果，但裡面的內容也會變形。

巢狀

在子元素加入一個反向的 transform: skewX(45deg)，反轉變形。

.button {
  background: #07434C;
  transform: skewX(-45deg)
}

.button > div {
  transform: skewX(45deg)
}

偽元素

.button {
  position: relative;
}

.button::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #07434C;
  transform: skew(-45deg);
}

3-3 菱形圖片

菱形圖片有以下兩種處理方式：

1. 變形

  <div class="picture">
    <img src="photo.jpg" alt="..." /> 
  </div>

.picture {
  width: 200px;
  transform: rotate(45deg);
  overflow: hidden;
}
.picture>img {
  max-width: 100%;
  transform: rotate(-45deg) scale(1.42);
}

2. 剪裁路徑 clip-path

clip-path 工具

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

---

3-4 剪角

設計中常用的樣式。

1. linear-gradient

單一角

background: linear-gradient(-45deg, transparent 15px, #F2F3E9 0);

四角

  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. 內圓角

  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 工具

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);

3-5 不規則四邊形頁籤

不規則四邊形頁籤設計甚至比平行四邊形還來得常見。

方法與平行四邊形差不多，運用偽元素加上變形效果、圓角：

.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;
}

3-6 簡單的圓餅圖

計時器、統計圖表都需要用到圓餅圖。

1. 變形解法

2. SVG 解法