(image from 中国窗棂)
The traditional Chinese window lattice has a symmetrical beauty, as well as a very beautiful formal name -- 窗棂.
As a CSS lover, I've always wanted to draw them with CSS by hand.
But that's never being easy.
I thought using SVG might be much straightforward until I learned how to apply the
-webkit-box-reflect is non-standard. The standard way is to use
element() function, which has been implemented
in Firefox already.
-webkit-box-reflect property seems much elegant to me because it has a better name and it doesn't rely on
element() does. I don't get why it wasn't accepted by the CSS WG.
-webkit-box-reflect property provides four directions of reflection:
This is how to use it:
Perhaps because it's just an experimental property from the very beginning, there's no way yet to add multiple reflections to an element at once.
I think it would be much cooler to have multiple reflections and reflections in various degrees other than only 4 of them.
It's still exciting
Let's start with a single
div element and its reflection on the right side.
How to add another reflection?
Yes, we can do something similar by adding a parent node and setting reflection to it.
It's like unfolding a sheet of paper, first in half from left to right and then top to bottom. However, the order doesn't really matter.
Although it's not the exact result we wanted, it's so exciting to find a way to add multiple reflections.
The total number of elements grows exponentially in this way,
which is dependent on the depth of the nested
So given 2 nested
divs like the above,
there will be 2^2 = 4 elements (including all the reflections).
Given 7 of them will be 2^7 = 128 elements.
div can be treated as a seed. Since
the whole graph composed with reflections will change with it.
For example, rotate it with -45 degree:
Or combine with any other properties and some old methods. It seems another different way to build Unicode Patterns as well.
Chinese Window Lattice
So with the
-webkit-box-reflect property and the technique described above,
we can finally draw those symmetrical window lattices in CSS with very few lines of code.
I want to take the picture at the beginning of the article as an example. Let's see how to draw them step by step.
1. The seed element
First, find out the smallest part that can't be divided any further. Here we start from the part in the upper left corner as the seed element.
And then draw these lines with background
:empty selector to target the seed element for simplicity.
2. Add reflection
The reflection begins with the seed element itself. We pick "right" as an initial direction and use custom property to make it more intuitive.
3. Continue unfolding
So we're going to add parent nodes for more reflections. It really helps to understand if you think of it as unfolding a sheet of paper.
Add another one.
Repeat the process until we get the desired result.
You can see the result and the complete source code on CodePen. But you know it works only in Chrome and Safari.
The solution using
-webkit-box-reflect property is beautiful in some way.
I really wish it had been accepted as a standard and can even do reflections in various directions. So that it may be
possible to do JianZhi (Chinese Paper-cutting Art) in CSS.
(2019-05-19) Updated description in "Continue unfolding". (2019-05-20) See the discussion on Hacker News.