css3 翻起页脚

 

html

<div class="demo2">
    <img src="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: 0;
                right: 0;
                width: 0;
                height: 0;
                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实现动画变化