談談一些有趣的CSS題目（九）-- 巧妙的實現 CSS 斜線

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

解題不考慮兼容性，題目天馬行空，想到什麼說什麼，若是解題中有你感受到生僻的 CSS 屬性，趕忙去補習一下吧。

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

談談一些有趣的CSS題目（一）-- 左邊豎條的實現方法

談談一些有趣的CSS題目（二）-- 從條紋邊框的實現談盒子模型

談談一些有趣的CSS題目（三）-- 層疊順序與堆棧上下文知多少

談談一些有趣的CSS題目（四）-- 從倒影提及，談談 CSS 繼承 inherit

談談一些有趣的CSS題目（五）-- 單行居中，兩行居左，超過兩行省略

談談一些有趣的CSS題目（六）-- 全兼容的多列均勻佈局問題

談談一些有趣的CSS題目（七）-- 消失的邊界線問題

談談一些有趣的CSS題目（八）-- 純CSS的導航欄Tab切換方案

全部題目彙總在個人 Github 。

 

9、巧妙的實現 CSS 斜線

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

這種相似於表格的斜線效果，細細研究一下，仍是有一些挺有趣的方法能夠實現之。

咱們假定咱們的 HTML 結構以下：

<div></div>

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

 

法1、CSS3 旋轉縮放

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

這裏咱們使用 僞元素 畫出一條直線，而後繞 div 中心旋轉 45deg ，再縮放一下就能夠獲得。

簡單的一張流程圖：

Demo戳我:CSS3旋轉縮放斜線

 

法2、線性漸變實現

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

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

transparent 爲透明色值。

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

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

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

 

法3、僞元素+三角形

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

利用 CSS border ，是能夠輕鬆實現一個相似這樣的三角形的：

CSS 代碼以下：

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

這裏，咱們使用 div 的兩個 僞元素 畫出兩個大小不一的三角形，而後經過疊加在一塊兒的方式，實現一條斜線。

相似這樣，配合 div 的白色底色，便可獲得一條斜線：

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

 

 

法4、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 加上兩個僞元素咱們能夠像 解法三 同樣製做出斜線。

固然，咱們也能夠換一種方法，異曲同工，解法三也能夠這樣作，看看下面的效果圖：

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

 

全部題目彙總在個人 Github ，發到博客但願獲得更多的交流。

到此本文結束，若是還有什麼疑問或者建議，能夠多多交流，原創文章，文筆有限，才疏學淺，文中如有不正之處，萬望告知。