css3书页卷角使用教程,css - 这个卷角的效果怎么做？

怪我咯2017-04-17 14:32:451楼

//html

//css

.form{

width:408px;

height:200px;

background:#2f2f2f;

position:relative;

overflow:hidden;

margin:30px auto;

}

.corner{

background:-webkit-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);

background:-moz-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;

background:-o-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;

background:-ms-linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;

background:linear-gradient(45deg, #2e2e2e 24%, #5F5F5F 40%,#6f6f6f 43%,#5F5F5F 46%,#2F2F2F 50%,#fff 50%,#fff);height:90px;

width:90px;

height:90px;

border-radius:0 0 0px 90px / 0 0 0 30px;

-webkit-transform:rotate(-90deg);

-moz-transform:rotate(-90deg);

-o-transform:rotate(-90deg);

-ms-transform:rotate(-90deg);

transform:rotate(-90deg);

position:absolute;

left:-4px;

top:-4px;

box-shadow:5px 2px 8px black;

overflow:hidden;

}

.corner:after{

height:100%;

width:100%;

position:absolute;

content:"";

top:-15px;

left:-82px;

border-radius:90px 90px 0px 0 / 40px 40px 0 0;

z-index:1;

background:#2F2F2F;

-webkit-transform:rotate(77deg);

-moz-transform:rotate(77deg);

-o-transform:rotate(77deg);

-ms-transform:rotate(77deg);

transform:rotate(77deg);

box-shadow:0px 0px 8px black inset;

}

css3书页卷角使用教程,css - 这个卷角的效果怎么做？相关推荐

docker 数据卷 mysql_Docker 入门教程(五)数据卷 Volumes
有些容器在运行的时候是会产生数据的: 这种容器就叫做有状态容器: 比如说 MySQL 容器: 我们在创建镜像的时候希望保留的是 MySQL 各种配置以及扩展: 并不想把 MySQL 的数据也打包到镜像 ...
html中切角文本框,css实现切角效果
1. 一个切角思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...
视频教程-HTML5和CSS3移动端开发全套教程-HTML5/CSS
HTML5和CSS3移动端开发全套教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强, ...
好程序员HTML5前端教程-css的引入方式和选择器
好程序员HTML5前端教程-css的引入方式和选择器 01.引入css方式(重点掌握) 行内样式内接样式外接样式 3.1 链接式 3.1 导入式 css介绍现在的互联网前端分三层: HTML:超 ...
html四边形的的框怎么编写,html知识点之利用css四边形切角并且加上边框
html知识点之利用css四边形切角并且加上边框 html知识点之利用css四边形切角并且加上边框前言这几个月做了很多前端工作,其中一个需求还是蛮头疼,UI给的图上面的四边形是一个带斜边的,直接用 ...
保姆级教程 CSS 知识点梳理大全，超详细！！！
保姆级教程 CSS 知识点梳理大全,超详细!!! ✴️大家好,我是王同学,好久不见,趁着假期王同学把CSS 知识点梳理了一遍 ✴️如果对你有帮助就给我点个赞吧,这样我们就互不相欠了 ✴️星光不负赶路人 ...
02前端入门HTML5 +CSS3+电商网页制作：CSS
02前端入门HTML5 +CSS3+电商网页制作 0 来源 1 CSS基础 1.1 基础认识 1.1.1 css demo 1.1.1 css的层叠性 1.2 CSS引入方式 1.3 选择器 1.4 ...
html给图标加角标,HTML+CSS入门如何使用CSS创建一个图片角标
本篇教程介绍了HTML+CSS入门如何使用CSS创建一个图片角标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 角标是一个给某元素标明"New",& ...
html怎么实现地球自转,纯CSS3实现地球自转的教程
相信很多人在听到CSS3实现地球自转的时候都会很惊讶,不过css确实可以实现地球自转,那么你知道纯CSS3如何实现地球自转吗?好奇的小伙伴们一起跟爱站小编去看看纯CSS3实现地球自转的教程吧. 最终成 ...
跨平台html5页面代码,HTML5+CSS3跨平台网页设计实例教程
HTML5+CSS3跨平台网页设计实例教程编辑锁定讨论上传视频 <HTML5+CSS3跨平台网页设计实例教程>是2018年8月清华大学出版社出版的图书,作者是陈承欢.韩耀坤.颜珍平 ...

css3书页卷角使用教程,css - 这个卷角的效果怎么做？

css3书页卷角使用教程,css - 这个卷角的效果怎么做？相关推荐

最新文章

热门文章