CSS3 Example of drawing geometry

1, round

Example:

Idea: Give any square element a big enough border-radius to turn it into a circle. The code is as follows:

Html:

<div class= "Size example1" ></div>

Css:

. size{
    width:200px;
    height:200px;
    Background: #8BC34A;
example1{
    Border-radius:100px;
}

2. Adaptive Ellipse

Idea: Border-radius This attribute also has another little-known truth, which can accept not only the length value, but also the percent value. This percentage value is parsed based on the dimensions of the element. This means that the same percentage may calculate different horizontal and vertical radii. The code is as follows:

Html:

<div class= "Example3" ></div>

Css:

. example3{
    width:200px;
    height:150px;
    Border-radius:50%;
    Background: #8BC34A;
}

3. Adaptive half ellipse: Half ellipse split along the horizontal axis

Idea: Border-radius's grammar is much more flexible than we think. You may be surprised to find that Border-radius was originally a shorthand attribute. The first approach is to use each of the expanded properties that it corresponds to:

• Border-top-left-radius
• Border-top-right-radius
• Border-bottom-right-radius
• Border-bottom-left-radius

We can even provide completely different horizontal and vertical radii for all four corners by specifying a 1~4 value before the slash, and specifying another 1~4 value after the slash. For example, when the value of Border-radius is 10px/5px 20px, the effect is equivalent to 10px 10px 10px 10px/5px 20px 5px 20px.

When you specify 4, 3, 2, and a space-delimited value for the Border-radius property, these values are assigned to four corners with such a rule (note that for the ellipse radius, there are up to four parameters for the slash before and after the slash, and the two sets of values are assigned to each corner in the same way)

The code is as follows: Adaptive half ellipse: Half ellipse split along the horizontal axis

Html:

<div class= "Example4" ></div>

Css:

. example4{
    width:200px;
    height:150px;
    Border-radius:50%/100% 100% 0 0;
    Background: #8BC34A;
}

4. Adaptive half ellipse: half ellipse split along longitudinal axis

Train of thought: Adaptive half ellipse: half ellipse split along longitudinal axis

The code is as follows:

Html:

<div class= "Example5" ></div>

Css:

. example5{
    width:200px;
    height:150px;
    Border-radius:100% 0 0 100%/50%;
    Background: #8BC34A;
}

5, One-fourth Oval

Train of thought: the horizontal and vertical radii of one corner need to be 100%, while the other three corners cannot be rounded.

The code is as follows:

Html:

<div class= "Example6" ></div>

Css:

. example6{
    width:160px;
    height:100px;
    Border-radius:100% 0 0 0;
    Background: #8BC34A;
}

6, with the Oval to draw the Opera browser logo

Train of thought: The logo of Opera browser, the analysis is not difficult, there are only two layers, one is the bottom of the ellipse, one is the top layer of the ellipse. First of all, determine the bottom of the ellipse width and height, the horizontal width of 258px, vertical height of 275px, because it is a symmetrical ellipse, no inclination, so the 4 corners are the horizontal radius of 258px, the vertical radius of the 275px 4 equal ellipse, The same method is used to determine the radius of the innermost ellipse, so that the four corners are the horizontal radius 120px, the ellipse with a vertical radius of 229px, the code is as follows:

Html:

<div class= "Opera" >
        <div class= "opera-top" ></div> 
</div>

Css:

. opera{
    width:258px;
    height:275px;
    Background: #F22629;
    Border-radius:258px 258px 258px 258px/275px 275px 275px 275px;
    Position:relative
}
. Opera-top{
    width:112px;
    height:231px;
    Background: #FFFFFF;
    Border-radius:112px 112px 112px 112px/231px 231px 231px 231px;
    Position:absolute;
     50%;
     50%;
     50%;
     50%;
    Margin-left:-56px;
    Margin-top:-115px;
}

7. Parallelogram

Idea: Pseudo-element scheme: All styles (backgrounds, borders, etc.) are applied to pseudo elements, then the pseudo elements are deformed. Because our content is not contained in the pseudo element, so the content is not affected by the deformation. The code is as follows:

Html:

<div class= "button" >transform:skew () </div>

Css:

. button {
    width:200px;
    height:100px;
    position:relative;
    left:100px;
    line-height:100px;
    Text-align:center;
    Font-weight:bolder;
}

. button::before {
Content: '; /* Use pseudo element to generate a rectangle * *
Position:absolute;
top:0; right:0; bottom:0; left:0;
Z-index:-1;
Transform:skew (45DEG);
Background: #8BC34A;
}

Tip: This technique is useful not only for skew () variants, but also for any other variant style, which can be used when we want to deform an element without distorting its contents.

8, Diamond

Idea: We put this technique on the rotate () transformation style slightly adjusted, and then use a square element, you can easily get a diamond. The code is as follows:

Html:

<div class= "example1" >transform:rotate () </div>

Css:

. example1 {
    width:140px;
    height:140px;
    position:relative;
    left:100px;
    line-height:100px;
    Text-align:center;
    Font-weight:bolder;
Example1::before {
    '; 
    Position:absolute;
     0; right:0; bottom:0; left:0;
    Z-index:-1;
    Transform:rotate (45deg);
    Background: #8BC34A;
}

Tip: The key to this technique is that we use pseudo elements and positional attributes to create a square, then style the pseudo element and place it on the lower level of its host element. This kind of thinking can also be used in other scenarios to get a variety of effects.

9. Diamond Picture

Idea: Based on the scheme of deformation,
We want the width of the picture to be equal to the diagonal of the container, not to the side looks. We need to use the Pythagorean theorem, which tells us that the diagonal length of a square is equal to its side length multiplied by the root 2, about 1.414 213 562. Therefore, it is reasonable to set the value of the max-width to square root 2 times 100% to about 414.421 356 2%, or to put this value up to 142% because we do not want the computed rounding problem to cause the picture to be slightly smaller when it is actually displayed (but slightly larger). Anyway, we're cutting the picture.

The code is as follows:

Html:

<div class= "Picture" >
    
 </div>

Css:

. Picture {
    width:200px;
    Transform:rotate (45deg);
    Overflow:hidden;
    margin:50px
}
. Picture img {
    max-width:100%;
    Transform:rotate (-45deg) scale (1.42);
    Z-index:-1;
    position:relative;
}

Tip: We want the size property of the picture to retain the value of 100%, so that when the browser does not support deformable styles, a reasonable layout can still be obtained. When you scale a picture with the scale () transform style, it is scaled at its center point (unless we specify the Transform-origin style). When you enlarge a picture by using the Width property, the image is scaled only by its upper-left corner, which forces us to use the extra negative margin to adjust the position of the picture back.

10, cutting angle effect

Idea: Based on the background:linear-gradient () scheme: The Four corners are made to cut corners effect. You need a four-layer gradient pattern, and the code looks like this:

Html:

<div class= "Example2" >hey, focus! You are supposed to is looking at my corners and not reading my text. The text is just placeholder!</div>

Css:

. example2{
    background: #8BC34A;
    Background:linear-gradient (135deg, Transparent 15px, #8BC34A 0) top left,
                linear-gradient ( -135deg, Transparent 15px, #8BC34A 0) Top right,
                linear-gradient ( -45deg, Transparent 15px, #8BC34A 0) Bottom righ T,
                linear-gradient (45deg, Transparent 15px, #8BC34A 0) bottom left;
    Background-size:50% 50%;
    Background-repeat:no-repeat;
    
     1. 2em;
    Max-width:12em;
    line-height:15em;
}

11, Arc cutting angle

Train of thought: The above gradient technique also has a variant that can be used to create curved tangent angles (many people also call this effect "concave rounded" because it looks like a reverse version of rounded corners). The only difference is that we'll replace the linear gradient with a radial gradient, and the code is as follows:

Html:

<div class= "Example3" >hey, focus! You are supposed to is looking at my corners and not reading my text. The text is just placeholder!</div>

Css:

. example3{
    background: #8BC34A;
    Background:radial-gradient (circle at top left, Transparent 15px, #8BC34A 0) top left,
                radial-gradient (Circle at top right, transparent 15px, #8BC34A 0) up right,
                radial-gradient (circle on bottom right, Transpa Rent 15px, #8BC34A 0) Bottom right,
                radial-gradient (circle in bottom left, transparent 15px, #8BC34A 0) b Ottom left;
    Background-size:50% 50%;
    Background-repeat:no-repeat;
    
     1. 2em;
    Max-width:12em;
}

12. Simple Pie chart

Idea: Based on transform solution: We can now use a rotate () Transform property to turn this pseudo element. If we want to show a ratio of 20%, we can specify that the rotation value is 72deg (0.2x360 = 72), and that writing. 2turn is more intuitive. You can also see some other spin values. The code is as follows:

Html:

<div class= "Pie" ></div>

Css:

. pie{
    width:140px;
    height:140px;
    Background: #8BC34A;
    Border-radius:50%;
    Background-image:linear-gradient (to Right,transparent 50%, #655 0);
pie::before{
    ';
    Display:block;
    Margin-left:50%;
     100%;
    Border-radius:0 100% 100% 0/50%;
    Background-color:inherit;
    Transform-origin:left;
    Transform:rotate (. 1turn); /*10%*/
    transform:rotate (. 2turn); /*20%*/
    transform:rotate (. 3turn); /*30%*/
}

Tip: Specify the angle in the parameter. Turn is circled, 1turn = 360deg, and in addition there is radians Rad,2nrad = 1turn = 360deg. For example, Transform:rotate (2turn); Rotate two laps

This method works well when it shows the ratio of 0到50%, but if we try to show a 60% ratio (for example, when you specify a rotation value of. 6turn), the problem occurs. WORKAROUND: Use a reverse version of the above technique to implement the ratio in this range: set a brown pseudo element that rotates within the range of 0 to 5turn. So, to get a 60%-ratio pie chart, the code for the pseudo element might be this:

Html:

<div class= "Pie2" ></div>

Css:

. pie2{
    width:140px;
    height:140px;
    Background: #8BC34A;
    Border-radius:50%;
    Background-image:linear-gradient (to Right,transparent 50%, #655 0);
pie2::before{
    ';
    Display:block;
    Margin-left:50%;
     100%;
    Border-radius:0 100% 100% 0/50%;
    Background: #655;/* when the range is greater than 50%, the background color of the pseudo element needs to be changed to #655;*/
    transform-origin:left;
    Transform:rotate (. 1turn);
}

Use CSS animation to achieve a pie chart from 0 to 100% animation to get a cool progress indicator:

The code is as follows:

Html:

<div class= "Pie3" ></div>

Css:

. pie3 {
    width:140px;
    height:140px;
    Border-radius:50%;
    Background:yellowgreen;
    Background-image:linear-gradient (to right, transparent 50%, CurrentColor 0);
    Color: #655;

Pie3::before {
    ';
    Display:block;
    Margin-left:50%;
     100%;
    Border-radius:0 100% 100% 0/50%;
    Background-color:inherit;
    Transform-origin:left;
    Animation:spin 3s linear infinite, BG 6sstep-endinfinite;
}

@keyframes Spin {to
    {transform:rotate (. 5turn);}
}
@keyframes BG {
    50% {background:currentcolor}
}}