如何使用单个标签实现下图的斜线效果。图片的斜线效果类似于表格。经过仔细研究，还是有一些有趣的实现方式。我们假设我们的HTML结构如下：
假设高和宽都是100px，在单个标签的限制内，看有多少种实现方式。方法一、CSS3旋转缩放这个应该属于看到需求第一眼就能想到的方法。这里我们用一个伪元素画一条直线，然后绕div的中心旋转45deg，再缩放得到。一个简单的流程图：原理图如下：1CodePenDemo-CSS3RotateScaleSlash[1]方法二、线性渐变实现该方法使用背景的线性渐变实现。渐变背景重要的一点是，虽然名字叫Gradient，但是也可以画纯色代替渐变。我们选择线性渐变的方向为45deg，设置渐变颜色值为：transparent->deeppink->deeppink->transparent。透明是透明颜色值。像这样简单的一句话就可以实现斜线效果：background:linear-gradient(45deg,transparent49.5%,deeppink49.5%,deeppink50.5%,transparent50.5%);CodePenDemo-CSSslash(线性渐变实现)[2]方法三、伪元素+三角形接下来的两个方法感觉有点像斜线换斜线。使用CSSborder，很容易实现这样的三角形：CSS代码如下：div{border:50pxsolidtransparent;border-left:50pxsoliddeeppink;border-bottom:50pxsoliddeeppink;}这里我们使用div的两个伪元素绘制两个不同大小的三角形叠加在一起实现对角线。像这样，配合div的白色底色，就可以得到一条斜线：CodePenDemo-CSS斜线（伪元素+三角形实现）[3]方法四、clip-path什么是clip-path？它可以看作是CSS3属性的新增功能，或者更准确地说是SVG的CSS版本。使用剪辑路径，我们可以定义任何所需的剪辑路径。本文不深入讨论clip-path，大家可以移步MDN[4]或其他关于clip-path的文章进行学习。使用clip-path的多边形规则polygen，也可以很方便的做出一个三角形（本题我们还是使用伪元素来使用clip-path）：CSS代码如下：div{width:100px;height:100px;-webkit-clip-path:polygon(00,0100px,100px100px,00);background:deeppink;}可以看到css代码，主要的polygon(00,0100px,100px100px,00)其实就是一系列的路径坐标点，整个A图就是这些点所围成的区域。所以使用clip-path加上两个伪元素我们就可以像方案三一样做一个斜线。当然我们也可以改变方法来达到同样的目的。解决方案3也可以这样做。看看下面的效果图：CodePenDemo-CSSSlash(clip-path)[5]最后，本文到此结束，介绍一下使用CSS实现斜线的几个小技巧，希望对大家有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS[6]。参考资料[1]CodePenDemo-CSS3RotationScaleSlash:https://codepen.io/Chokcoco/pen/eBOpwO[2]CodePenDemo-CSSSlash(LinearGradientImplementation):https://codepen.io/Chokcoco/pen/gLYaXR[3]CodePenDemo-CSS斜杠（伪元素+三角形实现）：https://codepen.io/Chokcoco/pen/Mbgaeq[4]MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path[5]CodePen演示-CSS斜杠（clip-path）：https://codepen.io/Chokcoco/pen/WoeQWY[6]Github--iCSS：https://github.com/chokcoco/iCSS