Moment For Technology

Css3 draws 3D graphics -- cones, cylinders and bars

Posted on May 27, 2023, 11:04 p.m. by Shane Wright-Parkinson
Category: The front end Tag: css

1. A histogram

When broken down, the bar chart is composed of two parallel four deformations and a rectangle, as follows:

To make the bar chart more beautiful, we added shadows, and gradients, and a slow rise:

Effect drawing code link: PEN /KKKEQvy

2. The cylinder

The cylinder is relatively simple, consisting of two ellipses and a rectangle. At the same time, we add gradient to it to deepen the three-dimensional sense, as follows:

Effect drawing code link: pen/LYYaQOK

3. The cone

Side Angle cone

Is composed of two triangles, as follows:

To make it more stereoscopic, we added a shadow and a light:

Link to the rendering code: Pen /pooYaWp

Top cone view

If you look at the cone from the top, it's made up of three triangles, and here we say two ways to write it

  • The first is mainly caused byTwo right trianglesShape andAn equilateral triangleConstitute a

We positioned a light bar in the image for visual stereoscopic effect, and the bottom line was formed by superposition of two triangles

  • The second is made up of two horizontally flipped right triangles and an equilateral triangle (also add light for visual effect).

Link to the rendering code: Pen /GRReQQZ

3. Triangle bar chart

Consists of two rectangles and a triangle (rectangles and triangles are made by flipping horizontally or vertically)

Link to the rendering code: Pen /pooYadp

About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.