css实现折角效果

W-MoMo

已于 2023-02-09 10:29:50 修改

阅读量350

点赞数 1

分类专栏： HTML | CSS 文章标签： css 前端 Powered by 金山文档

于 2023-02-07 16:55:16 首次发布

本文链接：https://blog.csdn.net/m0_65489440/article/details/128921453

版权

HTML | CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一个小demo，使用css实现卡片右上角翻转的效果；

效果如下：

使用linear-gradient进行控制去实现。

全部代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css实现折角效果</title>
    <style>
      div {
        width: 500px;
        height: 300px;
        margin: 50px auto;
        background: linear-gradient(
              to left bottom,
              transparent 50%,
              rgba(0, 0, 0, 0.5) 0
            )
            no-repeat 100% 0 / 3em 3em,
          linear-gradient(225deg, transparent 2.1em, #36a 0);
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

有更好的实现方法可以一起交流~