Examples of CSS implementation of various shapes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3 implements various shapes</title>
    <style type="text/css">
        div{
            display:inline-block;
        }
        #circle{
            height: 120px;
            width: 120px;
            background-color: chocolate;
            -moz-border-radius: 60px;
            -webkit-border-radius: 60px;
            border-radius: 60px;
        }

        #oval{
            /*Oval*/
            width: 200px;
            height: 100px;
            background-color: cornflowerblue;

            /*Two setting methods/ The number before the number represents the horizontal radius and the number after the number represents the vertical radius*/
            /*-moz-border-radius: 100px/50px;*/
            /*-webkit-border-radius: 100px/50px;*/
            /*border-radius: 100px/50px;*/

            /*Represents that the radius of the circle is 50% vertically and horizontally*/
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }

        #triangle-orign{
            /*Triangle principle*/
            width: 100px;
            height: 100px;
            background-color: black;
            border-top: 140px solid #113322;
            border-left: 140px solid #4400ff;
            border-right: 140px solid crimson ;
            border-bottom: 140px solid lightseagreen;
        }


        #triangle{
            /*triangle*/
            width: 0;
            height: 0;
            border-bottom: 140px solid #8855ff;
            border-left:70px solid transparent;
            border-right: 70px solid transparent;
        }

        #triangle-down{
            /* Downward facing triangle */
            width: 0;
            height: 0;
            border-top: 140px solid blue;
            border-left: 70px solid transparent;
            border-right: 70px solid transparent;
        }

        #triangle-left{
            width: 0px;
            height: 0px;
            border-left: 140px solid coral;
            border-top: 70px solid transparent;
            border-bottom: 70px solid transparent;
        }

        #triangle-right{
            width: 0px;
            height: 0px;
            border-right: 140px solid magenta;
            border-top: 70px solid transparent;
            border-bottom: 70px solid transparent;
        }
    </style>
</head>
<body>
    <div id="shapes">
        <!--circle-->
        <div id="circle"></div>

        <!--Ellipse-->
        <div id="oval"></div>

        <!--Triangle Prototype-->
        <div id="triangle-orign"></div>

        <!--Triangle-->
        <div id="triangle"></div>

        <div id="triangle-down"></div>

        <div id="triangle-left"></div>

        <div id="triangle-right"></div>

    </div>
</body>
</html>
Examples of CSS implementation of various shapes

Guess you like
