Pure CSS3 to create a tangram_html/css_WEB-ITnose

I recently had to make a jigsaw puzzle for my project, and something flashed into my mind. . . Isn’t the jigsaw puzzle something you played when you were a kid? . .

The origin of the jigsaw puzzle

Let’s do some popular science first. I saw it when I was researching information. I found it very interesting.

In the Song Dynasty, there was a man named Huang Bosi who was very knowledgeable about geometric figures. He was very hospitable and invented a "banquet table" consisting of 6 small tables - a small table for entertaining guests. Later, someone improved it into a banquet table consisting of 7 tables. The tables can be assembled into different shapes according to the number of people eating, such as 3 people forming a triangle, 4 people forming a square, 6 people forming a hexagon... …This makes dining convenient for everyone and creating a better atmosphere. Later, some people reduced the banquet to only seven boards, used it to do puzzles, and evolved into a toy.

Because it is very clever and fun, people call it "tangram".

Today, almost no one in the world does not know the tangram and tangram. It is called "Tangram" abroad, which means puzzle from China (not a figure invented in the Tang Dynasty) .

Nani, it turns out that Tangram belongs to China. . .

Plan

After reading the interesting things, it’s time to get down to business, which is to create a jigsaw puzzle for me no matter what technology is used. . . (In the front-end page)

Combined with my own knowledge system, I thought about the general idea:

1. Canvas, the omnipotent Cavans can definitely solve the problem, plus I have done Painter before . Flexibility and scalability are met.
2. CSS3, each section is a dom element, and then use css3 to complete it. Flexibility and scalability are not as good as canvas.
3. svg, this should be possible, but I lack knowledge in this area.
4. . . . Haven't figured it out yet.

Taking into account the time cost (too tight) and others. . . For this reason, I decided to use the css3 solution.

I started thinking about using pictures to make the board, but thanks to my previous article, I wrote an article 'How to write various shapes of graphics using CSS code', which included methods of using CSS3 to create 20 types of graphics. Interested students can take a look and check the 7 types of board shapes that can meet the needs.

Attributes used

Technical verification

Before you start, you need to verify whether the CSS3 to be used is Compatible with all required platforms, thanks to http://caniuse.com/.

Because I want to run it on the mobile terminal, I checked the css3 attributes to be used. They are supported on Android 2.3 and above, but they need to be prefixed, so you can use them with confidence.

Coding implementation

First we need a container and an element to represent the seven boards.

<div class="wrap">    <div class="t t1 t11"></div>    <div class="t t2 t22"></div>    <div class="t t3 t33"></div>    <div class="t t4 t44"></div>    <div class="t t5 t55"></div>    <div class="t t6 t66"></div>    <div class="t t7 t77"></div></div>

In fact, there are three types of graphics we use in total, triangles, square rows and parallelograms. This is all covered in the article mentioned above. The little mathematical knowledge involved here is that there is a certain size relationship between these boards. It only takes a little mathematical knowledge to solve it.

At this point, the representation of the board is no longer a problem. Next, you need to move the board to a designated position to form a good-looking graphic. This is all done by CSS3 transform, which can achieve translation, scaling, rotation, deformation and more. kind of operation.

Here we set the position of wap to relative. All boards are absolute. And set top and left to zero, so that all boards are located in the upper left corner during initialization, and then set the transform-origin of the board to the upper left corner to achieve good calculation during positioning. The following is the code for the css part.

.wrap{    position: relative;    width:300px;    height: 400px;}.t{    position: absolute;    top:0;    left:0;    width: 0;    height: 0;    transform-origin:0 0;}.t1{        border-top: 212.13203435596425732025330863145px solid red;     border-right: 212.13203435596425732025330863145px solid transparent;    transform: translate(150px, 150px) rotate(-135deg);}.t2{    border-top: 212.13203435596425732025330863145px solid #fdaf17;     border-right: 212.13203435596425732025330863145px solid transparent;    transform: translate(150px, 150px) rotate(135deg);}.t3{    width: 106.06601717798212866012665431573px;    height: 106.06601717798212866012665431573px;    background: #c3d946;    transform: translate(150px,150px) rotate(45deg);}.t4{    border-top: 106.06601717798212866012665431573px solid #00bdd0;     border-right: 106.06601717798212866012665431573px solid transparent;    transform: translate(150px,150px) rotate(-45deg);}.t5{    border-top: 106.06601717798212866012665431573px solid #5dbe79;     border-right: 106.06601717798212866012665431573px solid transparent;    transform: translate(75px,225px) rotate(45deg);}.t6{    width: 150px;    height: 75px;    transform: translate(300px) rotate(90deg) skew(45deg);    background: #ffdd01;}.t7{    border-top: 150px solid #0177bf;     border-right: 150px solid transparent;    transform: translate(300px,300px) rotate(180deg);}

DEMO

Okay, the tangram is finally done. Let’s take a look at the effect.

Leave a jsfiddle code, the blog cannot be owed, I can only leave a link http://jsfiddle.net/yanhaijing/3tf8ac6q/1/

Is that just improving

? Of course not, there are many things to consider. The css here are all hard-coded and the flexibility is too poor. If you use LESS (I use less), We can set a basic length variable (less supports variables and mathematical operations), and then all other calculations are based on this variable. In this way, as long as this variable is changed, the size of the entire tangram can be easily changed. Will the scalability be greatly improved? (In fact, this is what I did, but jsfiddle does not support less syntax, so I wrote a css version).

In fact, you can also change a variety of graphics through CSS3. It is said that the tangram can create thousands of graphics. . . Use your brain quickly to make it. Remember to leave a link to the blogger when you are done.

A further improvement is to create animation through CSS3 transition. With key-frame, you can create complex animations of tangram deformation, and the effect is beautiful.

I will only post a picture here, no code will be provided. . .

Reference materials