Using CSS to realize perspective effect

First, let's look at how border generates diagonal effects, adding the following code to your HTML head, and you'll see the effect.

. Border{width:0;height:0;border-width:50px;border-color: #f00 #0f0 #00f #000; border-style:solid;}

With the above foundation, we can use two additional div to achieve the perspective effect.

One, the HTML code is as follows:

<div class= "Perspective-outer" >
<div class= "Perspective-r" ></div>
<div class= "Perspective-b" ></div>
<div class= "Perspective-inner" > Pivot effect element </div>
</div>

Second, CSS code:

. perspective-outer{
 position:relative
 width:170px;/* to implement perspective element width + Perspective distance */
 height : 140px;/* to achieve the height of the perspective element + perspective distance */
}
. perspective-inner{
 border:1px solid #f60;
 height:118px;
 width:148px;
 background-color: #fff;
}
. perspective-r,
. perspective-b{
 position:absolute;
 width:0;
 height:0;
}
. perspective-r{
 right:0
 height:100px;/* The height of the pivot effect element (120px)-(border-top:20px) */
 border-left:20px Solid #000/* Right Perspective distance */
 border-top:20px solid #fff/* Bottom Perspective distance */

. Perspective-b {
 bottom:0;
 width:150px;/* The width of the most foreign element (170px)-border-left*/
 border-left:20px solid #fff;
 border-top : 20px solid #000;
}

. Perspective-outer defines the height and width, and relative positioning, ensures that the right and bottom perspective areas can position the corresponding position, the height value and the width value for the perspective element to achieve the height plus the corresponding perspective distance ... perspective-r just set the height value, The value is. Perspective-outer the height minus border-top,.perspective-b just set the width value to the. Perspective-outer width minus the border-left. The width value of the border-left of Border-top and. Perspective-b of Perspective-r determines the perspective angle. The width value of the border-top of the Border-left and perspective-b of Perspective-r determines the perspective distance. Among them. Perspective-r's border-top and. Perspective-b's Border-left's color is the parent element's background colour, I here the test page parent element is the body, therefore is white.