How to use CSS3 to achieve a dog-ear effect-CSS Tutorial-php.cn

How to use CSS3 to achieve a dog-ear effect

不言

Release： 2018-06-20 14:42:57

Original

3606 people have browsed it

This article mainly introduces you to the effect of using CSS3 to achieve the corner folding. When the mouse moves over the picture, the corner folding effect will appear. The example code is given in the article to make it easier for everyone to understand and learn. Let’s follow. Let’s learn together.

Let’s take a look at the static renderings first

Example code

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  body {
   background-color: #eaf0f2;
  }
   h1{text-align: center;}
   .box{width:500px;height:300px;margin:0 auto;position:relative;}
   .img-layer{position: absolute;width: 500px;height: 300px;top: 0;left: 0;overflow: hidden;}
   .img-layer img {width: 500px;cursor: pointer;}
   .img-layer:before{ content: &#39;&#39;;
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0;
    border-color: rgba(0,0,0,0.2) #fff;
    border-radius: 0 0 0 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
    -webkit-transition: all 0.4s ease-out;
    transition:all 0.4s ease-out;}
  .img-layer:hover:before{
    border-right-width:100px;
    border-bottom-width:100px;
  }
  </style>
 </head>
 <body>
  <h1>折角效果</h1>
  <p class="box">
   <p class="img-layer">
     <img src="<a href="http://p6.qhimg.com/d/inn/3f563406/table.jpg">http://p6.qhimg.com/d/inn/3f563406/table.jpg</a>" alt="">
   </p>
  </p>
 </body>
</html>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to use css to realize arrows of any size, direction and angle

##Using CSS3 to realize the cool Black Cat Sheriff homepage

The above is the detailed content of How to use CSS3 to achieve a dog-ear effect. For more information, please follow other related articles on the PHP Chinese website!