How to make geometric shapes from paper? Schemes and tips.

Print Thank you, great lesson +2

In origami, you very often come across such a basic figure as a rhombus. From it you can further create a lot interesting crafts, which will cause delight and joy in any child. These include camel, stork, palm tree, etc.

Since this figure occurs frequently, it is certainly easy to make and even a preschooler can cope with it. As with any craft, you will need a square sheet of paper. For convenience, you can take a sticker and make the first blank from it. Repeat step by step and already at the sixth stage you will get a beautiful and neat diamond made of paper using the origami technique.

• A square sheet of paper of any color

Step-by-step photo lesson:

We take our square sheet of paper and place it at an angle towards us. We take the right side corner with our fingers and fold this side onto the left side.

Now you can walk along the fold and then open the workpiece.

We take the lower right corner and bend it straight towards the middle, namely towards the central fold.

Now you can bend the lower left corner to this central fold. This figure is the basic shape in origami and is called “ By kite" However, we will continue to make a diamond shape out of paper. Therefore, let's move on to the next stage.

Turn the workpiece over and bend the lower corners one by one towards the center.

We turn it over and get this wonderful figure called a rhombus. A diamond made of colored paper using the origami technique is ready! You can save it as a blank for another more interesting and complex craft.

Large selection of developments of simple geometric shapes.

Children's first introduction to paper modeling always begins with simple geometric shapes such as cubes and pyramids. Not many people succeed in gluing a cube together the first time; sometimes it takes several days to make a truly even and flawless cube. More complex figures, a cylinder and a cone, require several times more effort than a simple cube. If you don't know how to glue carefully geometric figures, which means for complex models It's too early for you to start. Do it yourself and teach your children how to do these “basics” of modeling using ready-made patterns.

To begin with, I, of course, suggest learning how to glue a regular cube. Developments are made for two cubes, large and small. A small cube is a more complex figure because it is more difficult to glue than a large one.

So, let's begin! Download the developments of all the figures on five sheets and print them on thick paper. Before printing and gluing geometric shapes, be sure to read the article on how to choose paper and how to properly cut, bend and glue paper.

For better quality printing, I advise you to use the AutoCAD program, and I’m giving you scans for this program, and also read how to print from AutoCAD. Cut out the development of the cubes from the first sheet; be sure to draw a compass needle under the iron ruler along the fold lines so that the paper bends well. Now you can start gluing the cubes.

To save paper and just in case, I made several unfolds of a small cube, you never want to glue more than one cube together or something won’t work out the first time. Another simple figure is a pyramid, its development can be found on the second sheet. The ancient Egyptians built similar pyramids, though not made of paper and not so small in size :)

And this is also a pyramid, but unlike the previous one, it has not four, but three sides.

Development of a trihedral pyramid on the first sheet for printing.

And another funny pyramid of five sides, its development on the 4th sheet in the form of an asterisk in two copies.

A more complex figure is a pentahedron, although a pentahedron is more difficult to draw than to glue.

Development of a pentahedron on the second sheet.

Now we get to complex figures. Now you have to work harder, it’s not easy to glue such shapes together! To begin with, an ordinary cylinder, its development on the second sheet.

And this is a more complex figure compared to a cylinder, because at its base is not a circle, but an oval.

The development of this figure is on the second sheet; two spare parts were made for the oval base.

To accurately assemble the cylinder, its parts need to be glued end-to-end. On one side, the bottom can be glued without problems, just place the pre-glued tube on the table, place a circle on the bottom and fill it with glue from the inside. Make sure that the diameter of the pipe and the round bottom fit tightly together, without gaps, otherwise the glue will leak and everything will stick to the table. It will be more difficult to glue the second circle, so glue auxiliary rectangles inside at a distance of paper thickness from the edge of the pipe. These rectangles will prevent the base from falling inward, now you can easily glue the circle on top.

A cylinder with an oval base can be glued in the same way as a regular cylinder, but it has a smaller height, so it’s easier to insert a paper accordion inside, and put a second base on top and glue it along the edge with glue.

Now a very complex figure - a cone. Its details are on the third sheet, a spare circle for the bottom is on the 4th sheet. The whole difficulty of gluing a cone is in its sharp top, and then it will be very difficult to glue the bottom.

Complex and at the same time simple figure this is a ball. The ball consists of 12 pentahedrons, the development of the ball on the 4th sheet. First, two halves of the ball are glued, and then both are glued together.

Enough interesting figure- rhombus, its details are on the third sheet.

And now two are very similar, but completely different figures, their difference is only in the base.

When you glue these two figures together, you won’t immediately understand what they are, they turned out to be completely unresponsive.

Another interesting figure is a torus, but we have it very simplified, its details are on the 5th sheet.

And finally, the last figure from equilateral triangles, I don’t even know what to call it, but the figure looks like a star. The development of this figure is on the fifth sheet.

That's all for today! I wish you success in this difficult work!

Problem

Cropping images into a diamond shape is a common technique in visual design, but implementing it in CSS is far from easy. In fact, until recently this was almost impossible.

Therefore, to realize their ideas, designers had to first crop the required images in graphic editor. Of course, needless to say, this type of effect means huge difficulties in maintaining the website and guaranteed confusion in the future if someone wants to change the stylization of the images. Surely we should have a better way by now. In fact, there are two such ways!

Transformation based solution

The basic idea is the same as in the first solution from the previous secret (see the “Parallelogram” secret above) - we need to wrap our image in

, and then apply the opposite transformation to it rotate()
HTML

.picture(
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img (
max-width: 100%;
transform: rotate(-45deg);
}
However, as you can see in the picture, we were unable to achieve the required stylization right away. Of course, if you were planning to crop the image into an octagon shape, you can call the job done and move on to something else. But in order to crop the picture to the shape of a diamond, you will have to work harder.

The opposite rotation() transformations are not enough to achieve the desired effect (the div with the name.picture is indicated by a dotted outline)
The main problem lies in the max-width: 100% declaration. 100% applies to our container.picture side. However, we want the width of the resulting image to be equal to the diagonal of the original, not its side. You already guessed that we again need the help of the Pythagorean theorem (if you need to refresh your memory, you will find the explanation in secret). As the theorem states, the diagonal of a square is equal to its side multiplied by .

Therefore, it makes sense to set a max-width value of 2 × 100% ≈ 141.4213562% or, rounded, 142%, since we in no case want the image to become smaller (and if it turns out to be a little larger, then everything ok since we're cutting it anyway).

In fact, it's even better to scale the image up using the scale() transformation, for two reasons: we want the image size to remain at 100% in situations where CSS transformations aren't supported;
When an image is enlarged using the scale() transformation, it is scaled from the center (unless a different transform-origin value is specified). If you increase it by changing the value of the width property, then it will be scaled from the top left corner and in order to move it we will need to use negative values fields. Putting everything together, we get this final code:
.picture(
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img (
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
As you can see in the picture, this finally gives us the desired result.

TRY IT YOURSELF!
http://play.csssecrets.io/diamond-images

Clipping Path Solution

The previous solution works, but is inherently a dirty trick. He demands additional element HTML, which means it's a messy, confusing, and fragile solution: if we have to deal with non-square images, the result will be disastrous.

In reality there are many The best way achieve the desired result. The main idea is to use the property clip-path- another feature borrowed from SVG. This property can now be applied to HTML content (at least in supporting browsers), and in a nice, readable syntax, unlike the SVG equivalent, which is notorious for driving people crazy.

It has only one drawback (at the time of writing this chapter) - limited browser support. However, this solution gracefully falls back to a simplified rendering (no clipping), so it is a worthy candidate for consideration. Chances are you're already familiar with clipping paths thanks to image editing apps like Adobe Photoshop. Clipping paths allow you to trim an element into any shape you want. IN in this case we're going to use polygon() shape.

We will define a rhombus, but in general this shape allows you to define any polygon by a sequence of points separated by commas. You can even use percentages - the total values ​​will be calculated relative to the overall dimensions of the element. The code is very simple:
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

Believe it or not, that's all! But instead of two HTML elements and eight lines of confusing CSS code, we achieved what we wanted with just one simple line. But the wonderful abilities of clip-path are not limited to this. This property even supports animation - provided that we are animating the transition between two identical shape functions (in our case polygon()) with the same number of points. Thus, if we want to smoothly expand full image on mouseover, this can be implemented in this way:
img (
clip-path: polygon(50% 0, 100% 50%,
50% 100%, 0 50%);
transition: 1s clip-path;
}
img:hover (
clip-path: polygon(0 0, 100% 0,
100% 100%, 0 100%);
}
Additionally, this method adapts perfectly to non-square images, Ah, the joys of modern CSS...
TRY IT YOURSELF!

A rhombus is a simple geometric figure that has four vertices and is therefore one of the special cases of a parallelogram. It is distinguished from other polygons of this kind by the equality of the lengths of all sides. This feature also determines that the angles at opposite vertices of the figure have the same size. There are several ways to construct a rhombus - for example, using a compass.

You will need

• Sheet, pencil, compass, ruler, protractor.

Instructions

• Place two arbitrary points on the opposite edges of the sheet, which will be the opposite vertices of the rhombus, and label them with the letters A and C.
• Place an auxiliary point approximately in the place where the third vertex of the figure should be. The distance from it to vertices A and C should be the same, but absolute accuracy is not required at this step.
• Using a compass, measure the distance from point A to the auxiliary point and draw a semicircle with the center at point A, facing towards point C.
• Draw the same semicircle (without changing the distance marked on the compass) with its center at point C and directed towards point A.
• Place points B and D at the top and bottom intersections of the semicircles and draw connecting lines between points A and B, B and C, C and D, D and A. This completes the construction of a rhombus with an arbitrary side and angles.
• If you want to build a rhombus with a given side length, then first mark this value on a compass. Then place point A, which will be one of the vertices of the quadrilateral, and draw a semicircle in the direction of the supposed opposite vertex.
• Place point C where you would like to see the opposite vertex. Assume that the distance from the outlined semicircle to this vertex should be less than the distance marked on the compass. The smaller this distance is, the wider the diamond will be.
• Repeat the steps described in steps five and six. After this, the construction of a rhombus with sides of a given length will be completed.
• If you want to build a rhombus with a given angle, then first designate two arbitrary points A and B neighboring peaks rhombus and connect them with a segment.
• Mark off the length of the segment AB on the compass and draw a semicircle with the center at point A. Perform all subsequent constructions without changing the distance marked on the compass.
• Attach the protractor to segment AB so that the zero mark coincides with point A, measure the given angle and place an auxiliary point.
• Draw a line segment starting at point A, passing through the auxiliary point and ending on the previously drawn semicircle. Mark the end point of the segment with the letter D.
• Draw two semicircles directed towards each other with centers at points B and D. One of the intersection points of the semicircles will be narrower existing point A, and label the other with the letter C and connect it to points B and D. This will complete the construction of a rhombus with a given angle.