Many friends in the development of some to draw a lot of shapes, it is very tangled, know how to use CSS to layout, but do not know how to draw patterns.
In fact, CSS can be used to draw many shapes, such as triangles, trapezoids, circles, ellipses and so on, not just rectangles.
Today’s tutorial will teach you how to use CSS to draw these graphics.
In order to facilitate everyone to understand, today is divided into basic shapes and combined shapes to explain together, basic shapes are very easy to understand, use these basic shapes for combination, you can achieve slightly complex combined shapes.
The basic shape
triangle
trapezoidal
circular
The ellipse
A sphere
semicircle
The diamond
Combination of shape
heart
A heart is a combination of two circles and a rectangle.
The fan
A sector is a combination of a circle and a rectangle, covering part of the circle with the rectangle to form a sector.
pentagon
A pentagon is a combination of a triangle and a trapezoid.
hexagon
A hexagon is a combination of two triangles and a rectangle.
cuboid
A cuboid is a combination of six rectangles.
The cylinder
A cylinder is a combination of an ellipse and a rounded rectangle.
pyramid
A pyramid is a combination of four triangles and a rectangle.
The last
Some of the things I’m going to talk about today are a little bit hard to implement, but you can also use clip-path as a property to draw shapes.
Of course, CSS can draw much more than that. There are a lot of things today at a stroke can not finish, today is more basic some, interested in this little partner can explore behind.