html

<div class="demo2">
<img src="data:images/1.jpg">
</div>

css

.demo2{
width: 300px;
height: 300px;
position: relative;
margin: 100px auto; }
.demo2 img{
width: 100%;
}
.demo2::before{
position: absolute;
content: '';
top:;
right:;
width:;
height:;
border-bottom-left-radius: 4px;
border-color: rgba(0,0,0,0.2) #fff;
border-width: 0px;
border-style: solid;
box-shadow: 0px 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);
transition: all 0.4s ease-out;
}
.demo2:hover::before{
border-bottom-width: 50px;
border-right-width: 50px;
}

原理:

利用border-width实现

before伪元素宽高为0,利用border宽度border-right和border-bottom实现以及border颜色实现上下分割,hover时利用transtion实现动画变化

css3 翻起页脚的更多相关文章

  1. C#操作word的一些基本方法(word打印,插入文件,插入图片,定位页眉页脚,去掉横线)

    Microsoft.Office.Interop.Word.Application wordApp = new ApplicationClass() word对象 2. Microsoft.Offic ...

  2. openxml(二) 添加页眉,页脚

    openxml 中 word 文档的结构是如下图: 其中,页眉是 header,属于headerpart 部件,页脚是footer,属于footerpart 部件,图上还有其他的东西,之后会一一介绍. ...

  3. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  4. DIV+CSS:页脚永远保持在页面底部

    页脚永远保持在页面底部 有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不 ...

  5. LaTeX 页眉页脚的设置

    Latex中页眉页脚的设置 1. 首先要加页眉页脚的话,需要启动宏: 我通常用fancyhdr宏包来设置页眉和页脚. \usepackage{fancyhdr} 我们在 LaTeX 中先把 page ...

  6. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  7. 关于JavaScript打印去掉页眉页脚

    因为这个问题,Google和百度都查了个遍,网上主要解决方案都是这一个代码: <script language="JavaScript"> var hkey_root, ...

  8. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  9. 对页面制定区域进行打印,以及打印不显示页脚URL的方法

    第一种方式 - 此种方式简单易用,但不能进行页面设置,会在底部显示页面的URL地址. 打印命令:只需在页面上的按钮事件调用这段JS代码 javascript:window.print(); ===== ...

随机推荐

  1. Oracle -- 连接每行的内容

    select wm_concat(message) from (        select rownum no, 'Case ''' || code || '''' || '' || chr(10) ...

  2. Ubuntu 14.04下单节点Ceph安装(by quqi99)

    作者:张华  发表于:2014-06-23版权声明:能够随意转载,转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明 (http://blog.csdn.net/quqi99 ) Ceph ...

  3. python classmethod方法 和 staticmethod

    classmethod() 是一个类方法,用来装饰对应的函数.被classmethod 装饰之后就无需实例化,也不需要在函数中传self,但是被装饰的函数第一个参数需要是cls来表示自身类.可以用来调 ...

  4. 前后端分离之fiddler前端开发代理 autoresponder 正则表达式 regex:(?insx) 修正符详解

    regex:(?isx)^http://127.0.0.1:3000(/dlscene)?/order/(\w*) http://127.0.0.1:8080/dlscene/order/$2 上面这 ...

  5. ubuntu 安装 pygame 很好玩的东西

    1. 简介 pygame 是基于对 SDL库的python 封装,提供python接口.SDL(Simple DirectMedia Layer) 是一个跨平台的游戏开发库,方便游戏开发和移植.目前最 ...

  6. ajax工作原理(转)

    在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...

  7. lvs虚拟服务器

    NAT模式 1.模拟环境: LVS服务器有两块网卡,连接外网(用户端)和内网(服务器),充当"交警"角色. 优点: 节省ip开销 缺点: LVS服务器负载过高,数据吞吐量降低 三台 ...

  8. Android笔记之Retrofit与RxJava的组合

    依赖 implementation 'com.squareup.retrofit2:retrofit:2.5.0' implementation 'com.squareup.retrofit2:con ...

  9. 大家都是怎么看待STO的?

    STO,全称为「Security Token Offer」,即证券型通证发行.STO是2017年底从美国开始流行的,对于在美国注册的公司,STO是一个合法合规的ICO. 对于STO,大家都是怎么看待的 ...

  10. linux安装mongodb,设为全局和后台启动

    curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.6.5.tgz # 下载 tar -zxvf mongodb-linux ...