開(kāi)本系列，談?wù)勔恍┯腥さ?code>CSS題目，題目類(lèi)型天馬行空，想到什么說(shuō)什么，不僅為了拓寬一下解決問(wèn)題的思路，更涉及一些容易忽視的 CSS 細(xì)節(jié)。

解題不考慮兼容性，題目天馬行空，想到什么說(shuō)什么，如果解題中有你感覺(jué)到生僻的 CSS 屬性，趕緊去補(bǔ)習(xí)一下吧。

不斷更新，不斷更新，不斷更新，重要的事情說(shuō)三遍。

所有題目匯總在我的Github。

使用單個(gè)標(biāo)簽，如何實(shí)現(xiàn)下圖所示的斜線效果。也就是如何使用 CSS 畫(huà)斜線？

這種類(lèi)似于表格的斜線效果，細(xì)細(xì)研究一下，還是有一些挺有趣的方法可以實(shí)現(xiàn)之。

我們假定我們的HTML結(jié)構(gòu)如下：

?

1	<div></div>

假定高寬各為 100px，在單個(gè)標(biāo)簽局限內(nèi)，看看能有多少種方法實(shí)現(xiàn)。

法一、CSS3 旋轉(zhuǎn)縮放

這個(gè)應(yīng)該屬于看到需求第一眼就可以想到的方法了。

這里我們使用偽元素畫(huà)出一條直線，然后繞 div 中心旋轉(zhuǎn) 45deg ，再縮放一下就可以得到。

簡(jiǎn)單的一張流程圖：

Demo戳我:CSS3旋轉(zhuǎn)縮放斜線

法二、線性漸變實(shí)現(xiàn)

這種方法使用了背景的線性漸變實(shí)現(xiàn)，漸變背景很重要的一點(diǎn)是，雖然名字喚作漸變，但是也是可以畫(huà)出實(shí)色而非漸變色。

我們選定線性漸變的方向?yàn)?45deg，依次將漸變色值設(shè)為：transparent->deeppink->deeppink->transparent。

transparent為透明色值。

就像這樣簡(jiǎn)單的一句，即可實(shí)現(xiàn)斜線效果：

?

1 2 3 4

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

Demo戳我:CSS斜線（線性漸變實(shí)現(xiàn)）

法三、偽元素+三角形

接下來(lái)兩種方法就有點(diǎn)為了斜線而斜線的感覺(jué)。

利用 CSS border ，是可以輕松實(shí)現(xiàn)一個(gè)類(lèi)似這樣的三角形的：

CSS 代碼如下：

?

1 2 3 4 5

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

這里，我們使用div的兩個(gè)偽元素畫(huà)出兩個(gè)大小不一的三角形，然后通過(guò)疊加在一起的方式，實(shí)現(xiàn)一條斜線。

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

Demo戳我:CSS斜線（偽元素+三角形實(shí)現(xiàn)）

法四、clip-path

clip-path是啥？可以算是 CSS3 的新增屬性，或者準(zhǔn)確來(lái)說(shuō)是 SVG 的 <path> 的 CSS 版本。

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

本文不深入探討clip-path，可以先移步MDN或者其他關(guān)于 clip-path 講解的文章學(xué)習(xí)一下。

使用clip-path的多邊形規(guī)則polygon，也可以輕松制作一個(gè)三角形（本題中，我們依然借助偽元素來(lái)使用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)中，其實(shí)是一系列路徑坐標(biāo)點(diǎn)，整個(gè)圖形就是由這些點(diǎn)圍起來(lái)的區(qū)域。

所以使用clip-path加上兩個(gè)偽元素我們可以像解法三一樣制作出斜線。

當(dāng)然，我們也可以換一種方法，殊途同歸，解法三也可以這樣做，看看下面的效果圖：

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

此次轉(zhuǎn)載...

所有題目匯總在我的Github，發(fā)到博客希望得到更多的交流。

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

總結(jié)

以上是生活随笔為你收集整理的巧妙的实现 CSS 斜线(炫酷的小效果)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。