css怎么绘制斜线(2)-木庄网络博客

2022-03-26 16:07:18 PHP中文网 JavaScript 百度已收录

这种方法使用了背景的线性渐变实现，渐变背景很重要的一点是，虽然名字唤作渐变，但是也是可以画出实色而非渐变色。

我们选定线性渐变的方向为 45deg，依次将渐变色值设为：transparent -> deeppink -> deeppink ->transparent。

transparent 为透明色值。

就像这样简单的一句，即可实现斜线效果：

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

以上就是css怎么绘制斜线的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

更多相关阅读请进入《css》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者