開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什么說什么，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。
解題不考慮兼容性，題目天馬行空，想到什么說什么，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型
談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少
談談一些有趣的CSS題目（四）-- 從倒影說起，談談 CSS 繼承 inherit
談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略
談談一些有趣的CSS題目（六）-- 全兼容的多列均勻布局問題
談談一些有趣的CSS題目（八）-- 純CSS的導航欄Tab切換方案
所有題目匯總在我的 Github 。
九、巧妙的實現 CSS 斜線
使用單個標簽，如何實現下圖所示的斜線效果。也就是如何使用 CSS 畫斜線？
這種類似於表格的斜線效果，細細研究一下，還是有一些挺有趣的方法可以實現之。
我們假定我們的 HTML 結構如下：
<div></div>
假定高寬各為 100px，在單個標簽局限內，看看能有多少種方法實現。
法一、CSS3 旋轉縮放
這個應該屬於看到需求第一眼就可以想到的方法了。
這里我們使用 偽元素 畫出一條直線，然后繞 div 中心旋轉 45deg ，再縮放一下就可以得到。
簡單的一張流程圖：
法二、線性漸變實現
這種方法使用了背景的線性漸變實現，漸變背景很重要的一點是，雖然名字喚作漸變，但是也是可以畫出實色而非漸變色。
我們選定線性漸變的方向為 45deg，依次將漸變色值設為：transparent -> deeppink -> deeppink ->transparent。
transparent為透明色值。
就像這樣簡單的一句，即可實現斜線效果：
div{
background:
linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);
}
法三、偽元素+三角形
接下來兩種方法就有點為了斜線而斜線的感覺。
利用 CSS border ，是可以輕松實現一個類似這樣的三角形的：
CSS 代碼如下：
div{
border:50px solid transparent;
border-left:50px solid deeppink;
border-bottom:50px solid deeppink;
}
這里，我們使用 div 的兩個 偽元素 畫出兩個大小不一的三角形，然后通過疊加在一起的方式，實現一條斜線。
類似這樣，配合 div 的白色底色，即可得到一條斜線：
法四、clip-path
clip-path 是啥？可以算是 CSS3 的新增屬性，或者准確來說是 SVG 的 <path> 的 CSS 版本。
使用 clip-path，我們可以定義任意想要的剪裁路徑。
本文不深入探討
clip-path，可以先移步 MDN 或者其他關於 clip-path 講解的文章學習一下。
使用 clip-path 的多邊形規則 polygon，也可以輕松制作一個三角形（本題中，我們依然借助偽元素來使用clip-path）：
CSS 代碼如下：
div {
width: 100px;
height: 100px;
-webkit-clip-path: polygon(0 0, 0 100px, 100px 100px, 0 0);
background: deeppink;
}
可以看到 CSS 代碼，主要 polygon(0 0, 0 100px, 100px 100px, 0 0) 中，其實是一系列路徑坐標點，整個圖形就是由這些點圍起來的區域。
所以使用 clip-path 加上兩個偽元素我們可以像 解法三 一樣制作出斜線。
當然，我們也可以換一種方法，殊途同歸，解法三也可以這樣做，看看下面的效果圖：
所有題目匯總在我的 Github ，發到博客希望得到更多的交流。
到此本文結束，如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。