css块元素对角线写法

最新推荐文章于 2024-04-01 07:55:52 发布

web码到功成

最新推荐文章于 2024-04-01 07:55:52 发布

阅读量353

点赞数

本文链接：https://blog.csdn.net/wbdisb/article/details/125672463

版权

利用渐变背最liee-gradient实现
先上代码

width: 200px;
height: 100px;
background: linear gradient(
to top right,//从左上到右下
rgba(0, 0, 0, 0) 0%，
rgba(0, 0, 0, 0) calc(50% - 1.5px),
rgba(0, 0, 0, 1) 50%，
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
), linear-gradient(
to bottom right,//从左下到右上
rgba(0, 0, 0, 0) 0%，
rgba(0, 0, 0, 0) calc(50% - 1.5px),
rgba(0, 0, 0, 1) 50%，
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
);

效果是这样的(加了红色边框)