CSS(九)-- 实现 CSS 斜线

 

九、巧妙的实现 CSS 斜线

使用单个标签,如何实现下图所示的斜线效果。也就是如何使用 CSS 画斜线?

这种类似于表格的斜线效果,细细研究一下,还是有一些挺有趣的方法可以实现之。

我们假定我们的 HTML 结构如下:

<div></div>

假定高宽各为 100px,在单个标签局限内,看看能有多少种方法实现。

 

法一、CSS3 旋转缩放

这个应该属于看到需求第一眼就可以想到的方法了。

这里我们使用 伪元素 画出一条直线,然后绕 div 中心旋转 45deg ,再缩放一下就可以得到。

简单的一张流程图:

Demo戳我:CSS3旋转缩放斜线