CSS3 to achieve a picture corner effect example

Effect analysis

Let's say we set the width and height of an element to 0, then set the border to 80px, and the top and bottom borders are two different colors, respectively.

That

width:0;
height:0;
border:80px solid;
Border-color: #00a67c #333;

As we can see, the four borders are pieced together like four triangles (obviously we can make a triangle by setting a single border)

To play the picture, four borders are four triangles together to form a square, what if it's set to two borders?

Would it be two triangles to synthesize a square? It turned out to be true!

CSS Code:
. border {
width:0;
height:0;
border:0px solid;
Border-color: #00a67c #333;
Float:left;
margin-left:10px;
}
. border1 {
border-left-width:80px;
border-top-width:80px;
}
. border2 {
border-left-width:80px;
border-bottom-width:80px;
}
. border3 {
border-right-width:80px;
border-top-width:80px;
}
. border4 {
border-right-width:80px;
border-bottom-width:80px;
}

HTML Code:

<div class= "Border Border1" ></div>
<div class= "Border Border2" ></div>
<div class= "Border Border3" ></div>
<div class= "Border Border4" ></div>

Here are four ways to remove two borders:

Smart students may have found that the corner effect is actually two triangular combination of squares, the effect of the formation, of course, also need to adjust the transparency of the color and so on.

Here is to achieve the upper right corner of the corner effect, so we need to select the fourth effect in the above figure.

Another point to add,

Adding a corner effect is actually in the top layer of the picture added, so use the pseudo element: before

Final code example

CSS Code
. image-layer {
width:384px;
height:240px;
margin:40px Auto 0;
position:relative;
Cursor:pointer;
Overflow:hidden;
}
. image-layer:before {
Content: ';
Position:absolute;
top:0;
right:0;
border:0px solid;
Border-color:rgba (0, 0, 0, 0.2) #fff;
-webkit-transition:border 5s ease;
}
. image-layer:hover:before {
border-right-width:80px;
border-bottom-width:80px
}

HTML Code

<div class= "Image-layer" id= "Image-layer" >

</div>