CSS实现折角效果：

Zheng_xinle

已于 2022-04-21 14:07:34 修改

阅读量1k

点赞数 1

分类专栏： Css动画文章标签： html 前端

于 2022-04-21 14:05:16 首次发布

本文链接：https://blog.youkuaiyun.com/Zheng_xinle/article/details/124320208

版权

本文介绍了如何利用CSS实现一种视觉上的折角效果，通过代码示例详细展示了创建过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果:
在这里插入图片描述

代码如下：

<!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>Document</title>
</head>

<body>
    <div class="note">
        <p>111</p>
    </div>

    <div class="note red rounded">
        <p>222</p>