巧妙的實現 CSS 斜線(炫酷的小效果)

標籤：cli   定義   man   更新   span   方法   eve   屬性   講解   

開本系列，談談一些有趣的 CSS 題目，題目類型天馬行空，想到什麼說什麼，不僅為了拓寬一下解決問題的思路，更涉及一些容易忽視的 CSS 細節。

解題不考慮相容性，題目天馬行空，想到什麼說什麼，如果解題中有你感覺到生僻的 CSS 屬性，趕緊去補習一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說三遍。

所有題目匯總在我的 Github 。

 

使用單個標籤，如何?所示的斜線效果。也就是如何使用 CSS 畫斜線？

這種類似於表格的斜線效果，細細研究一下，還是有一些挺有趣的方法可以實現之。

我們假定我們的 HTML 結構如下：

?

1	<div></div>

假定高寬各為 100px，在單個標籤局限內，看看能有多少種方法實現。

 法一、CSS3 旋轉縮放

這個應該屬於看到需求第一眼就可以想到的方法了。

這裡我們使用 虛擬元素 畫出一條直線，然後繞 div 中心旋轉 45deg ，再縮放一下就可以得到。

簡單的一張流程圖：

Demo戳我:CSS3旋轉縮放斜線

 法二、線性漸層實現

這種方法使用了背景的線性漸層實現，漸層背景很重要的一點是，雖然名字喚作漸層，但是也是可以畫出實色而非漸層色。

我們選定線性漸層的方向為 45deg，依次將漸層色值設為：transparent -> deeppink -> deeppink ->transparent。

transparent 為透明色值。

就像這樣簡單的一句，即可實現斜線效果：

?

1234	div{  background:    linear-gradient(45deg, transparent 49.5%, deeppink 49.5%, deeppink 50.5%, transparent 50.5%);}

Demo戳我:CSS斜線（線性漸層實現）

 法三、虛擬元素+三角形

接下來兩種方法就有點為了斜線而斜線的感覺。

利用 CSS border ，是可以輕鬆實現一個類似這樣的三角形的：

CSS 代碼如下：

?

12345

div{  border:50px solid transparent;  border-left:50px solid deeppink;  border-bottom:50px solid deeppink;}

這裡，我們使用 div 的兩個 虛擬元素 畫出兩個大小不一的三角形，然後通過疊加在一起的方式，實現一條斜線。

類似這樣，配合 div 的白色底色，即可得到一條斜線：

Demo戳我:CSS斜線（虛擬元素+三角形實現）

 

 

法四、clip-path

clip-path 是啥？可以算是 CSS3 的新增屬性，或者準確來說是 SVG 的 <path> 的 CSS 版本。

使用 clip-path，我們可以定義任意想要的剪裁路徑。

本文不深入探討 clip-path ，可以先移步 MDN 或者其他關於 clip-path 講解的文章學習一下。

使用 clip-path 的多邊形規則 polygon，也可以輕鬆製作一個三角形（本題中，我們依然藉助虛擬元素來使用clip-path）：

CSS 代碼如下：

?

123456

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 加上兩個虛擬元素我們可以像 解法三 一樣製作出斜線。

當然，我們也可以換一種方法，殊途同歸，解法三也可以這樣做，看看下面的：

Demo戳我:CSS斜線（clip-path）

 

此次轉載...

所有題目匯總在我的 Github ，發到部落格希望得到更多的交流。

如果還有更多的效果，大家可以一起交流，共同進步

巧妙的實現 CSS 斜線(炫酷的小效果)