重新閱讀一次CSS世界，發現關於border的部分場景很適合應用在日常工作上，因此想做一個紀錄，以供之後需要時參考。
Border繪圖 ・<等腰三角形>
1
2
3
4
5
.isosceles-triangle {
width: 0;
border: 20px solid;
border-color: pink transparent transparent;
}
・<四邊形，四個小梯形組成> 基礎動畫元素，實現單attribute的動畫過度效果(與set差別在於set不重複)
1
2
3
4
5
.rect {
width: 10px; height: 10px;
border: 10px solid;
border-color: pink orange blue green;
}
・<等腰三角形，瘦長版>
1
2
3
4
5
.thin-triangle {
width: 0;
border-width: 40px 10px;
border-style: solid;
border-color: orange transparent transparent;
・<直角三角形>
1
2
3
4
5
6
.right-triangle {
width: 0;
border-width: 10px 20px;
border-style: solid;
border-color: pink pink transparent transparent;
}
參考資料
- CSS世界 張鑫旭著
