Use css to achieve perspective effect

Use css to achieve perspective effect

Today I came up with an idea to use css to achieve the perspective effect. At first, I thought of our common method of adding shadow effects, which is achieved by using multiple divs through offset, but this requires many divs, which is not ideal. Then, I thought of a property of CSS: border, which can produce a diagonal effect at the junction of borders. This can be achieved with two divs. Let's take a look at the final effect first, and then analyze the implementation process.

First, let's take a look at how the border generates the diagonal effect. Add the following code to the head of your HTML and you will see such an 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 divs to achieve the perspective effect.

1. The html code is as follows :

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

2. CSS code:

.perspective-outer{
position:relative;
width:170px;/*The width of the element to achieve the perspective effect + perspective distance*/
height:140px;/*The height of the element to achieve the perspective effect + 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 element to achieve the perspective effect (120px) - (border-top:20px)*/
border-left:20px solid #000;/*right perspective distance*/
border-top:20px solid #fff;/*perspective distance below*/
}
.perspective-b{
bottom:0;
width:150px;/*Width of the outermost element (170px) - border-left*/
border-left:20px solid #fff;
border-top:20px solid #000;
}

.perspective-outer defines the height and width, and positions them relatively to ensure that the perspective areas on the right and below can be positioned at the corresponding positions. The height and width values ​​are the height of the element to achieve the perspective effect plus the corresponding perspective distance. .perspective-r only needs to set the height value, and its value is the height of .perspective-outer minus border-top. .perspective-b only needs to set the width value, and its value is the width of .perspective-outer minus border-left. The width values ​​of border-top of .perspective-r and border-left of .perspective-b determine the perspective angle. The width values ​​of border-left of .perspective-r and border-top of .perspective-b determine the perspective distance. Among them, the color of border-top of .perspective-r and border-left of .perspective-b is the background color of the parent element. The parent element of my test page here is body, so it is white.

3. Postscript

This article is just a simple test, its purpose is to inspire others. We don’t care about how practical this method is, but it can at least give us a way to solve the problem. Hope this article can be helpful to you.