css 对角线

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

天空之枫

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

阅读量1.8k

点赞数

分类专栏： css

原文链接：https://www.jianshu.com/p/e31fe2578352

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

利用渐变背景 linear-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%
  );

这一段表示从左上到右下的线

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%
  )