0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Sometimes you need to implement shadows that differ from the standard box-shadow without using images.</p>
1
<p>Sometimes you need to implement shadows that differ from the standard box-shadow without using images.</p>
2
<p>For example, shadows that are skewed in various directions.</p>
2
<p>For example, shadows that are skewed in various directions.</p>
3
<p>It is impossible to do this using box-shadow. Therefore, you need to use a more complex technique:</p>
3
<p>It is impossible to do this using box-shadow. Therefore, you need to use a more complex technique:</p>
4
<ul><li>Let’s create two blocks with regular shadows using the before and after pseudoelements.</li>
4
<ul><li>Let’s create two blocks with regular shadows using the before and after pseudoelements.</li>
5
<li>Let’s skew these blocks using rotate</li>
5
<li>Let’s skew these blocks using rotate</li>
6
<li>Let’s assign them a negative z-index.</li>
6
<li>Let’s assign them a negative z-index.</li>
7
</ul><p>This will move the boxes with shadows under the parent container so that only parts of the shadows will face outwards.</p>
7
</ul><p>This will move the boxes with shadows under the parent container so that only parts of the shadows will face outwards.</p>