開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什么說什么，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。
解題不考慮兼容性，題目天馬行空，想到什么說什么，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。
不斷更新，不斷更新，不斷更新，重要的事情說三遍。
所有題目匯總在我的 Github 。
使用單個標簽，如何實現下圖所示的斜線效果。也就是如何使用 CSS 畫斜線？
這種類似於表格的斜線效果，細細研究一下，還是有一些挺有趣的方法可以實現之。
我們假定我們的 HTML 結構如下：
|
1
|
<
div
></
div
>
|
假定高寬各為 100px，在單個標簽局限內，看看能有多少種方法實現。
法一、CSS3 旋轉縮放
這個應該屬於看到需求第一眼就可以想到的方法了。
這里我們使用 偽元素 畫出一條直線，然后繞 div 中心旋轉 45deg ，再縮放一下就可以得到。
簡單的一張流程圖：
法二、線性漸變實現
這種方法使用了背景的線性漸變實現，漸變背景很重要的一點是，雖然名字喚作漸變，但是也是可以畫出實色而非漸變色。
我們選定線性漸變的方向為 45deg，依次將漸變色值設為：transparent -> deeppink -> deeppink ->transparent。
transparent為透明色值。
就像這樣簡單的一句，即可實現斜線效果：
|
1
2
3
4
|
div{
background
:
linear-gradient(
45
deg,
transparent
49.5%
, deeppink
49.5%
, deeppink
50.5%
,
transparent
50.5%
);
}
|
法三、偽元素+三角形
接下來兩種方法就有點為了斜線而斜線的感覺。
利用 CSS border ，是可以輕松實現一個類似這樣的三角形的：
CSS 代碼如下：
|
1
2
3
4
5
|
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 代碼如下：
|
1
2
3
4
5
6
|
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 ，發到博客希望得到更多的交流。
如果還有更多的效果，大家可以一起交流，共同進步