CSS3 making various shape images

2. Make a circle:

   To use CSS to make a circle, we need a div, set an ID for it

   <div id= "Circle" ></div>

   Circle Set the width and height equal when setting up the CSS, then set the Border-radius property to half the width or height:

   #circle {

   width:120px;

   height:120px;

   Background: #7fee1d;

   -moz-border-radius:60px;

   -webkit-border-radius:60px;

   border-radius:60px;

   }

4. 2

   Make Oval:

   An ellipse is a variant of a positive circle, and a div with an ID is also used to make

   <div id= "Oval" ></div>

   When setting the ellipse's CSS, the height should be set to half the width, and the Border-radius property should be changed accordingly:

   #oval {

   width:200px;

   height:100px;

   Background: #e9337c;

   -webkit-border-radius:100px/50px;

   -moz-border-radius:100px/50px;

   border-radius:100px/50px;

   }

5. 3

   Making triangles:

   To create a CSS triangle, you need to use the border, by setting the transparency of the different edges, we can make the status of the triangle. Also, when making triangles, the width and height are set to 0.

   <div id= "Triangle" ></div>

   #triangle {

   width:0;

   height:0;

   border-bottom:140px solid #fcf921;

   border-left:70px solid Transparent;

   border-right:70px solid Transparent;

   }

7. 4

   Make inverted triangles:

   Unlike the positive triangles, the inverted triangles are set to the properties of the Border-top, Border-left, and border-right three edges:

   #triangle {

   width:0;

   height:0;

   border-top:140px solid #20a3bf;

   border-left:70px solid Transparent;

   border-right:70px solid Transparent;

   }

9. 5

   Make Left triangle:

   The left Triangle operates on the properties of the Border-top, Border-left, and border-right three edges, with the top and bottom set transparent properties.

   #triangle_left {

   width:0;

   height:0;

   border-top:70px solid Transparent;

   border-right:140px solid #6bbf20;

   border-bottom:70px solid Transparent;

   }

10. Making Diamonds

    There are many ways to make a diamond. Here, the transform attribute is combined with the rotate to make the two positive and negative triangles appear up and down.

    #diamond {

    width:120px;

    height:120px;

    Background: #1eff00;

    /* Rotate */

    -webkit-transform:rotate ( -45DEG);

    -moz-transform:rotate ( -45DEG);

    -ms-transform:rotate ( -45DEG);

    -o-transform:rotate ( -45DEG);

    Transform:rotate ( -45DEG);

    /* Rotate Origin */

    -webkit-transform-origin:0 100%;

    -moz-transform-origin:0 100%;

    -ms-transform-origin:0 100%;

    -o-transform-origin:0 100%;

    Transform-origin:0 100%;

    margin:60px 0 10px 310px;

    }

12. Making trapezoid:

    Trapezoid is a variant of the triangle, when setting the CSS ladder, the left and right two edges are set to equal, and set a width for it.

    #trapezium {

    height:0;

    width:120px;

    border-bottom:120px solid #ec3504;

    border-left:60px solid Transparent;

    border-right:60px solid Transparent;

    }

14. Production Parallelogram:

    Parallelogram is made by using the Transform property to tilt the rectangle an angle.

    #parallelogram {

    width:160px;

    height:100px;

    Background: #8734f7;

    -webkit-transform:skew (30DEG);

    -moz-transform:skew (30DEG);

    -o-transform:skew (30DEG);

    Transform:skew (30DEG);

    }

15. Star shape:

    The star-shaped HTML structure also uses an empty div with an ID. The way the star is implemented is more complex, mainly by using the Transform property to rotate different edges. Carefully understand the following code.

    #star {

    width:0;

    height:0;

    margin:50px 0;

    Color: #fc2e5a;

    position:relative;

    Display:block;

    border-right:100px solid Transparent;

    border-bottom:70px solid #fc2e5a;

    border-left:100px solid Transparent;

    -moz-transform:rotate (35DEG);

    -webkit-transform:rotate (35DEG);

    -ms-transform:rotate (35DEG);

    -o-transform:rotate (35DEG);

    }

    #star: Before {

    height:0;

    width:0;

    Position:absolute;

    Display:block;

    Top: -45px;

    Left: -65px;

    border-bottom:80px solid #fc2e5a;

    border-left:30px solid Transparent;

    border-right:30px solid Transparent;

    Content: ";

    -webkit-transform:rotate ( -35DEG);

    -moz-transform:rotate ( -35DEG);

    -ms-transform:rotate ( -35DEG);

    -o-transform:rotate ( -35DEG);

    }

    #star: After {

    Content: ";

    width:0;

    height:0;

    Position:absolute;

    Display:block;

    top:3px;

    Left: -105px;

    Color: #fc2e5a;

    border-right:100px solid Transparent;

    border-bottom:70px solid #fc2e5a;

    border-left:100px solid Transparent;

    -webkit-transform:rotate ( -70DEG);

    -moz-transform:rotate ( -70DEG);

    -ms-transform:rotate ( -70DEG);

    -o-transform:rotate ( -70DEG);

    }

16. Hexagon star Shape:

    Unlike the pentagram, the hexagonal star shape is made by manipulating the border property to make two halves of the graph and then merging them.

    #star_six_points {

    width:0;

    height:0;

    Display:block;

    Position:absolute;

    border-left:50px solid Transparent;

    border-right:50px solid Transparent;

    border-bottom:100px solid #de34f7;

    margin:10px Auto;

    }

    #star_six_points: After {

    Content: "";

    width:0;

    height:0;

    Position:absolute;

    border-left:50px solid Transparent;

    border-right:50px solid Transparent;

    border-top:100px solid #de34f7;

    margin:30px 0 0-50px;

    }

17. Hexagon:

    Hexagon can be made in many ways, like Pentagon, first make a rectangle, and then put a triangle above and below it.

    #hexagon {

    width:100px;

    height:55px;

    Background: #fc5e5e;

    position:relative;

    margin:10px Auto;

    }

    #hexagon: Before {

    Content: "";

    width:0;

    height:0;

    Position:absolute;

    Top: -25px;

    left:0;

    border-left:50px solid Transparent;

    border-right:50px solid Transparent;

    border-bottom:25px solid #fc5e5e;

    }

    #hexagon: After {

    Content: "";

    width:0;

    height:0;

    Position:absolute;

    Bottom: -25px;

    left:0;

    border-left:50px solid Transparent;

    border-right:50px solid Transparent;

    border-top:25px solid #fc5e5e;

    }      

18. Heart Shape:

    Heart-shaped production is very complex, you can use pseudo-elements to make, respectively, the pseudo-elements rotated different angles, and modify the Transform-origin attribute to the element's rotation center point.

    #heart {

    position:relative;

    }

    #heart: Before, #heart: after {

    Content: "";

    width:70px;

    height:115px;

    Position:absolute;

    background:red;

    left:70px;

    top:0;

    -webkit-border-radius:50px 50px 0 0;

    -moz-border-radius:50px 50px 0 0;

    border-radius:50px 50px 0 0;

    -webkit-transform:rotate ( -45DEG);

    -moz-transform:rotate ( -45DEG);

    -ms-transform:rotate ( -45DEG);

    -o-transform:rotate ( -45DEG);

    Transform:rotate ( -45DEG);

    -webkit-transform-origin:0 100%;

    -moz-transform-origin:0 100%;

    -ms-transform-origin:0 100%;

    -o-transform-origin:0 100%;

    Transform-origin:0 100%;

    }

    #heart: After {

    left:0;

    -webkit-transform:rotate (45DEG);

    -moz-transform:rotate (45DEG);

    -ms-transform:rotate (45DEG);

    -o-transform:rotate (45DEG);

    Transform:rotate (45DEG);

    -webkit-transform-origin:100% 100%;

    -moz-transform-origin:100% 100%;

    -ms-transform-origin:100% 100%;

    -o-transform-origin:100% 100%;

    transform-origin:100% 100%;

    }          

20. Egg shape:

    A variant of the oval shape with a slightly larger height than the width of the egg, and an egg shape can be created by setting the correct Border-radius property.

    #egg {

    width:136px;

    height:190px;

    Background: #ffc000;

    Display:block;

    -webkit-border-radius:63px 63px 63px 63px/108px 108px 72px 72px;

    border-radius:50% 50% 50% 50%/60% 60% 40% 40%;

    }  

21. Infinity symbol:

    The infinity symbol can be achieved by border the property and setting the angle of the pseudo-element.

    #infinity {

    width:220px;

    height:100px;

    position:relative;

    }

    #infinity: Before, #infinity: after {

    Content: "";

    width:60px;

    height:60px;

    Position:absolute;

    top:0;

    left:0;

    border:20px solid #06c999;

    -moz-border-radius:50px 50px 0;

    border-radius:50px 50px 0 50px;

    -webkit-transform:rotate ( -45DEG);

    -moz-transform:rotate ( -45DEG);

    -ms-transform:rotate ( -45DEG);

    -o-transform:rotate ( -45DEG);

    Transform:rotate ( -45DEG);

    }

    #infinity: After {

    Left:auto;

    right:0;

    -moz-border-radius:50px 50px 50px 0;

    border-radius:50px 50px 50px 0;

    -webkit-transform:rotate (45DEG);

    -moz-transform:rotate (45DEG);

    -ms-transform:rotate (45DEG);

    -o-transform:rotate (45DEG);

    Transform:rotate (45DEG);

    }

23. &NBSP;

    Message prompt:

    The

    Message prompt box lets you make a rounded rectangle, and then place a triangle where you want it.

    #comment_bubble {

        width:140px;

        height:100px;

        background: #088cb7;

        position:relative;

       -moz-border-radius:12px;

       -webkit-border-radius:12px;

        border-radius:12px;

    }

      

    #comment_bubble: Before {

        content: "";

        width:0;

        height:0;

        right:100%;

        top:38px;

        Position:absolute;

        BORDER-TOP:13PX solid transparent;

        BORDER-RIGHT:26PX solid #088cb7;

        BORDER-BOTTOM:13PX solid transparent;

    }                              

CSS3 making various shape images