CSS3实现精美的纸张折角效果

作者：白色的睡 | 来源：互联网 | 2023-06-22 18:00

预备知识CSS定位CSS三角实现CSS圆角及伪类,盒子阴影在自己做的项目的某个地方需要用到折角效果,折腾了下就拿出来分享了;效果图代码实现&

预备知识

CSS定位

CSS三角实现

CSS圆角及伪类,盒子阴影

在自己做的项目的某个地方需要用到折角效果,折腾了下就拿出来分享了;

效果图

代码实现


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3实现折角效果title>
    <style media="screen">
 .wrapper{
 margin:0 auto;
 width:500px;
 height:300px;
 background-color: #36b11d;
 border-radius: 10px;
 font-family: monoca,"微软雅黑",sans-serif;
 /*父包含块*/
 position: relative;
 }
 .wrapper > p{
 width:400px;
 height:200px;
 display: block;
 color:#f5f5f5;
 font-size:14px;

 /*文字换行*/
 word-wrap: break-word;
 word-break: break-all;

 /*内容块绝对居中*/
 position: absolute;
 top:50%;
 left:50%;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);

 /*文字增加阴影稍微有立体感一些*/
 text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
 overflow: hidden;
 }

 .wrapper::before{
 /*设置折角实现的位置;*/
 position: absolute;
 left:0;
 bottom: 0;
 width:0;

 content:"";
 display: block;
 border: 30px solid #7201aa;
 border-color:rgba(0, 255, 0, 0.5) rgba(0, 220, 0, 0.5) transparent transparent;
 background-color: #fff; //设置为透明的话,会显示绿底;

 /*设置元素的阴影效果*/
 box-shadow:1px -2px 1px rgba(0, 0, 0, 0.5) ;
 }

 .wrapper::after{
 /*设置折角实现的位置;*/
 position: absolute;
 right:0;
 bottom: 0;
 width:0;

 content:"";
 display: block;

 /*通过调整大小来控制折角的大小*/
 border: 60px solid #7201aa;
 border-color:rgba(0, 255, 0, 0.2) transparent transparent rgba(0, 220, 0, 0.2) ;
 background-color: #fff; //设置为透明的话,会显示绿底;

 /*设置元素的阴影效果*/
 box-shadow:-2px -3px 1px rgba(0, 0, 0, 0.5) ;
 }

 /*名字定位*/
 .wrapper>a{
 display: block;
 width:50px;
 line-height: 50px;
 text-align: center;
 font-size:15px;
 color:#2b2b2b;
 text-decoration: none;
 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); inset ;
 -webkit-transform: rotate(-45deg); inset ;
 -ms-transform: rotate(-45deg); inset ;
 transform: rotate(-45deg);
 position: absolute;
 right:70px;
 bottom: 50px;
 z-index: 50;
 }
 style>
head>
<body>
    <div class="wrapper">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit,
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
              aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
               velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
        p>
        <a href="#">CRPERLINa>
    div>
body>
html>

推荐阅读

io
VScode格式化文档换行或不换行的设置方法

本文介绍了在VScode中设置格式化文档换行或不换行的方法，包括使用插件和修改settings.json文件的内容。详细步骤为：找到settings.json文件，将其中的代码替换为指定的代码。 ... [详细]

蜡笔小新 2023-12-14 17:15:38
sum
logistic回归（线性和非线性）的开发笔记

本文由编程笔记#小编为大家整理，主要介绍了logistic回归（线性和非线性）相关的知识，包括线性logistic回归的代码和数据集的分布情况。希望对你有一定的参考价值。 ... [详细]

蜡笔小新 2023-12-14 21:40:43
bit
微软头条实习生分享深度学习自学指南

本文介绍了一位微软头条实习生自学深度学习的经验分享，包括学习资源推荐、重要基础知识的学习要点等。作者强调了学好Python和数学基础的重要性，并提供了一些建议。 ... [详细]

蜡笔小新 2023-12-14 20:58:32
io
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
io
Linux重启网络命令实例及关机和重启示例教程

本文介绍了Linux系统中重启网络命令的实例，以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法，以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]

蜡笔小新 2023-12-14 15:52:52
sum
IB 物理真题解析：比潜热、理想气体的应用

本文是对2017年IB物理试卷paper 2中一道涉及比潜热、理想气体和功率的大题进行解析。题目涉及液氧蒸发成氧气的过程，讲解了液氧和氧气分子的结构以及蒸发后分子之间的作用力变化。同时，文章也给出了解题技巧，建议根据得分点的数量来合理分配答题时间。最后，文章提供了答案解析，标注了每个得分点的位置。 ... [详细]

蜡笔小新 2023-12-14 15:00:29
select
CSS3选择器的使用方法详解，提高Web开发效率和精准度

本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]

蜡笔小新 2023-12-14 14:37:52
io
android listview OnItemClickListener失效原因

最近在做listview时发现OnItemClickListener失效的问题，经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效，还会导致单击后listview每个item的背景改变，使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 14:25:50
io
九度OnlineJudge之1002：Grading问题的解决方法

本文介绍了九度OnlineJudge中的1002题目“Grading”的解决方法。该题目要求设计一个公平的评分过程，将每个考题分配给3个独立的专家，如果他们的评分不一致，则需要请一位裁判做出最终决定。文章详细描述了评分规则，并给出了解决该问题的程序。 ... [详细]

蜡笔小新 2023-12-14 13:00:09
sum
P1651 塔 (动态规划) 的最大高度计算方法

本文介绍了P1651题目的描述和要求，以及计算能搭建的塔的最大高度的方法。通过动态规划和状压技术，将问题转化为求解差值的问题，并定义了相应的状态。最终得出了计算最大高度的解法。 ... [详细]

蜡笔小新 2023-12-13 19:52:19
express
Python正则表达式学习记录及常用方法

本文记录了学习Python正则表达式的过程，介绍了re模块的常用方法re.search，并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具，通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]

蜡笔小新 2023-12-13 16:37:19
io
【机器学习】生成式对抗网络模型综述

生成式对抗网络模型综述摘要生成式对抗网络模型(GAN)是基于深度学习的一种强大的生成模型，可以应用于计算机视觉、自然语言处理、半监督学习等重要领域。生成式对抗网络 ... [详细]

蜡笔小新 2023-12-14 17:51:18
express
伊振华作品 | 沈阳市智慧城市运行管理中心的设计与建设

本文介绍了设计师伊振华受邀参与沈阳市智慧城市运行管理中心项目的整体设计，并以数字赋能和创新驱动高质量发展的理念，建设了集成、智慧、高效的一体化城市综合管理平台，促进了城市的数字化转型。该中心被称为当代城市的智能心脏，为沈阳市的智慧城市建设做出了重要贡献。 ... [详细]

蜡笔小新 2023-12-14 16:35:39
sum
Open judge C16H: Magical Balls 快速幂+逆元问题解析

本文主要解析了Open judge C16H问题中涉及到的Magical Balls的快速幂和逆元算法，并给出了问题的解析和解决方法。详细介绍了问题的背景和规则，并给出了相应的算法解析和实现步骤。通过本文的解析，读者可以更好地理解和解决Open judge C16H问题中的Magical Balls部分。 ... [详细]

蜡笔小新 2023-12-14 12:03:27
io
《数据结构》学习笔记3——串匹配算法性能评估

本文主要讨论串匹配算法的性能评估，包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库，可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n)，通过随机取出长度为m的子串作为模式P，在文本T中进行匹配，统计平均复杂度。对于成功和失败的匹配分别进行测试，分析其平均复杂度。详情请参考相关学习资源。 ... [详细]

蜡笔小新 2023-12-13 16:16:05

白色的睡

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章

CSS3实现精美的纸张折角效果

预备知识 CSS定位 CSS三角实现 CSS圆角及伪类,盒子阴影 在自己做的项目的某个地方需要用到折角效果,折腾了下就拿出来分享了;

效果图

预备知识

CSS定位

CSS三角实现

CSS圆角及伪类,盒子阴影

在自己做的项目的某个地方需要用到折角效果,折腾了下就拿出来分享了;