使用CSS製作斜邊矩形原理分析

一。先上一張圖

二。上代碼

.pick{
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  background: #fd3a51;
  line-height: 20px;
  padding: 0 6px 0 8px;
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.pick::after{
  content: ' ';
  position: absolute;
  top: 0;
  right: -8px;
  border-width: 20px 8px;
  border-style: solid;
  border-color:#fd3a51 transparent transparent transparent;
}

三。原理分析

爲什麼這樣普普通通的兩段css就能實現斜邊的效果呢？

首先pick類裏面就是中規中矩的畫一個紅色背景的矩形，真正起作用的是after僞類裏面的border-color，如果現在這個設置還看不出所以然，我把border-color改成如下border-color:#fd3a51 black blue green;得到的效果圖如下

現在就應該很清楚了，原來僞類造了一個左移8px的矩形，上下邊厚度爲20px等於元矩形高度，左右邊厚度爲8px剛好爲左移8px的寬度，這樣一個厚度的四條邊使得每條邊厚度形成一個三角形的效果（不得不佩服第一個發現此效果的人真是聰明啊），然後把不相關的邊框設置爲透明色隱藏，就得到斜邊的效果了。

根據此原理，不難得出向右傾斜的邊應該這麼做

.self-pick::after{
  content: ' ';
  position: absolute;
  top: -20px;
  right: -8px;
  border-width: 20px 8px;
  border-style: solid;
  border-color:transparent transparent #fd3a51 transparent;
}

上移20px讓下邊與原矩形重合，保留下邊顏色爲原矩形顏色，其他邊顏色設爲透明

如圖