css implements basic geometry_html/css_WEB-ITnose

We know that CSS3 can draw many exquisite graphics through "new" features such as border-radius, animation, and transform. For example, Tencent Penguin Logo, Baymax Robot in Super Marines, Solar System, Minions, Jingle Cat, Android Robot, Apple Icon, etc.

These graphics may seem complicated to implement, but they are usually composed of basic graphics such as rectangles, circles, ellipses, triangles, and trapezoids. So we start with basic graphics. Once we are familiar with them, it will be possible to implement complex graphics.

First start with a rectangle, an element with width and height attributes, set its width and height value, block display, and you will get a rectangle.

By setting border-radius on the basis of a rectangle, you can get a rounded rectangle or a circle (when the rectangle is a square and the border-radius of the four corners is set to half the width of the square ) and ellipse (when the border-radius of the four corners of the rectangle is set to 50%).

The triangle is implemented below. Let's look at the border attribute. When there are adjacent borders, the connecting parts of the adjacent borders are the right angles of the rectangle. In order to form a right angle, the adjacent borders each contribute a right triangle to form the right angle of the rectangle, and the right angle of this right triangle The side length is the width of the border. So we only need to set one of the border colors to transparent or the current background color, and the visual effect will be a triangle. See the code:

　

#div_RightAngle1{ //直角三角形1    width:0;    height:0;    border-width:30px;    border-style:solid;    border-top-color:#abc;    border-right-color:#abc;    border-bottom-color:#fff;    border-left-color:#fff;}#div_RightAngle2{ //直角三角形2    width:0;    height:0;    border-width:30px;    border-style:solid;    border-color:#fff;    border-top-color:#abc;}#div_anyAngle{ //任意三角形    width:0;    height:0;    border-left:25px solid #fff;    border-right:25px solid #fff;    border-bottom: 50px solid #abc;}

Below we combine border and transform to implement an interesting curved arrow. The rendering is like this:. First construct a right-angled triangle div, rotate it by a certain angle through transform, and then use the after pseudo-class to create a bending effect through rounded corners. See the code:

#divArrow{ //弯曲箭头    position: relative;    width:0;    height:0;    border-top:9px solid transparent;    border-right:9px solid red;    transform:rotate(10deg);}#divArrow:after{    position:absolute;    content:"";    border-top:3px solid red;    border-radius:15px 0 0 0;    top:-12px;    left:-9px;    width:12px;    height:12px;    transform:rotate(45deg);}

Next, implement the trapezoid. We have already known that a right triangle can be constructed by setting the width and height to 0, with borders on three sides, and a visible color on one side. Then, if we make the element have a width, we can stretch the adjacent borders, so that A rectangle is formed inside the element. In this way, a trapezoid is constructed. See the code:

#div_Trapezoid{    width:25px;    height:0;    border-bottom:50px solid #abc;    border-left:50px solid #fff;    border-right:50px solid #fff;}

We use transform when implementing the curved arrow. Through it, we can also realize parallelograms, see the code:

#div_Parallelogram{    width:200px;    height:100px;    transform:skew(30deg);}

A square can realize a rhombus by rotating it 45 degrees. Similarly, we can also realize a triangle with To achieve this (using two right triangles put together):

#diamond1{    width:20px;    height:20px;    transform:rotate(45deg);}#diamond2{    width:0;    height:0;    border: 25px solid #fff;    border-bottom-color:#abc;    position:relative;}#diamond2:after{    position: absolute;    content:"";    left:-25px;    top:25px;    width:0;    height:0;    border: 25px solid #fff;    border-top-color:#abc;}

Next, we deform the rhombus to achieve a shield effect:

#diamond_Shield{    width:0;    height:0;    border:50px solid #fff;    border-bottom: 20px solid #abc;    position:relative;}#diamond_Shield:after{    position: absolute;    content:"";    top:20px;    left:-50px;    width:0;    height:0;    border:50px solid #fff;    border-top: 70px solid #abc;}

Next, implement the diamond shape based on rhombus and trapezoid:

#diamond3{    width:50px;    height:0;    position: relative;    border-style: solid;    border-color:#fff #fff #abc #fff;    border-width: 0 25px 25px 25px;}#diamond3:after{    position: absolute;    content:"";    top:25px;    left:-25px;    width:0;    height:0;    border-style: solid;    border-color: #abc #fff #fff #fff;    border-width: 70px 50px 0 50px;}

Realize a small house:

#house{    background-color: #abc;    height:55px;    width:100px;    position:relative;}#house:before{    content:"";    position:absolute;    height:0;    width:0;    left:0;    top:-35px;    border-bottom: 35px solid #abc;    border-left: 50px solid #fff;    border-right: 50px solid #fff;}

Based on the triangle, we make one side arc-shaped to form a fan shape:

#cone{    background-color: #fff;    width:0;    height:0;    border-left: 70px solid transparent;    border-right: 70px solid transparent;    border-top: 100px solid #abc;    border-radius:50%;}

What if we want to achieve a crescent shape? Because the crescent moon is composed of two arcs, each arc can be regarded as part of the arc length of a circle, so we can achieve it by giving the circle a shadow based on the circle:

#moon{    background-color: #fff;    width:80px;    height:80px;    border-radius:50%;    box-shadow: 15px 15px 0 0 #abc;}

Triangles and trapezoids can be combined into a pentagon. Let’s implement it below:

#pentagon{    background-color: #fff;    position: relative;    width:54px;    border-width: 50px 18px 0;    border-style:soild;    border-color: #abc transparent;}#pentagon:after{    content:"";    position:absolute;    height:0;    width:0;    top: -85px;    left:-18px;    border-width: 0 45px 35px;    border-style: solid;    border-color: transparent transparent #abc;}

A hexagon can be made from two triangles and a rectangle, an octagon can be made from two trapezoids and a rectangle, and a five-pointed star can be made from two trapezoids and a triangle through rotation, which will not be demonstrated here. .

Tomorrow is the Chinese Valentine’s Day, let’s finally make a heart shape, wishing all lovers in the world to get married eventually:

#heart{    width:0;    height:0;    position:relative;}#heart:before,#heart:after{    position: absolute;    content:"";    left:50px;    top:0;    width: 50px;    height:80px;    background: red;    border-radius: 50px 50px 0 0;    transform: rotate(-45deg);    transform-origin: 0 100%;}#heart:after{    left:0;    transform:rotate(45deg);    transform-origin:100% 100%;}

(because it’s just Demonstration, so the above styles are not prefixed by browser manufacturers)

Through the implementation of these basic graphics, it will be possible to realize complex graphics in the future.