谈谈一些有趣的CSS题目（九）-- 巧妙的实现 CSS 斜线

时间 2019-11-18

标签谈谈一些有趣 css 题目巧妙实现斜线栏目 CSS 繁體版

原文原文链接

开本系列，谈谈一些有趣的 CSS 题目，题目类型天马行空，想到什么说什么，不只为了拓宽一下解决问题的思路，更涉及一些容易忽视的 CSS 细节。css

解题不考虑兼容性，题目天马行空，想到什么说什么，若是解题中有你感受到生僻的 CSS 属性，赶忙去补习一下吧。html

不断更新，不断更新，不断更新，重要的事情说三遍。git

谈谈一些有趣的CSS题目（一）-- 左边竖条的实现方法github

谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型web

谈谈一些有趣的CSS题目（三）-- 层叠顺序与堆栈上下文知多少布局

谈谈一些有趣的CSS题目（四）-- 从倒影提及，谈谈 CSS 继承 inheritpost

谈谈一些有趣的CSS题目（五）-- 单行居中，两行居左，超过两行省略学习

谈谈一些有趣的CSS题目（六）-- 全兼容的多列均匀布局问题url

谈谈一些有趣的CSS题目（七）-- 消失的边界线问题spa

谈谈一些有趣的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 ，发到博客但愿获得更多的交流。

到此本文结束，若是还有什么疑问或者建议，能够多多交流，原创文章，文笔有限，才疏学浅，文中如有不正之处，万望告知。