Several graphical examples of pure CSS implementations

Several graphics implemented using pure CSS are shown below. At the beginning, the realization of regular triangles comes from digging gold pamphlets, and the realization of graphic effects based on mathematics is the real king.
All graphics, is about the implementation of the symbol of infinity, the reference code of the original element width calculation value is not quite understood, confusion is also in the following code comments.
There are relevant requirements can refer to the implementation, code and brief implementation process, as shown below, basic reference from THE CSS to achieve rounded corners, triangle, pentagonal star, pentagonal, heart, 12 star, 8 star, circle, ellipse, circle, eight diagrams, there are some modifications and adjustments, and the implementation of the exploration:
<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        .icon {
            display: inline-block;
            width: 0;
            font-size: 0;
            position: relative;
            margin-right: 20px;
        }

        /* 6 angles, made up of two triangles */
        .six-star {
            border-left: 60px solid transparent;
            border-right: 60px solid transparent;
            border-bottom: 104px solid red;
        }
        .six-star::after {
            border-left: 60px solid transparent;
            border-right: 60px solid transparent;
            border-top: 104px solid red;
            position: absolute;
            content: "";
            top: 30px;
            left: -60px;
        }
        /* arrow, by adding two triangles before (blank triangle) a small square
        .arrow {
            width: 40px;
            height: 40px;
            margin: 0 50px;
            background-color: red;
        }
        .arrow::before {
            position: absolute;
            left: -50px;
            border: solid 20px red;
            border-left-width: 50px;
            border-left-color: transparent;
            content: "";
        }
        .arrow::after {
            position: absolute;
            right: -40px;
            border: solid 20px transparent;
            border-left-color: red;
            content: "";
        }

        /* Pac-Man uses four border prototypes to make one border transparent */
        .pacman {
            width: 0px;
            height: 0px;
            border-right: 40px solid transparent;
            border-top: 40px solid red;
            border-left: 40px solid red;
            border-bottom: 40px solid red;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
            border-bottom-left-radius: 50%;
            border-bottom-right-radius: 50%;
        }

        .pacman-ext1{
            width: 0px;
            height: 0px;
            border-right: 40px solid transparent;
            border-top: 40px solid red;
            border-left: 40px solid red;
            border-bottom: 40px solid red;
            border-top-right-radius: 50%;
            border-bottom-right-radius: 50%;
        }

        .circle{
            width: 0px;
            height: 0px;
            border: 40px solid red;
            border-radius: 50%;
        }
        .circle2{
            width: 80px;
            height: 80px;
            background-color: red;
            border-radius: 50%;
        }
        .ring{
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border:5px solid red;
        }
        /* Semicircle implementation, width height/width width ratio of 1:2 border-radius greater than width height minimum */
        .half-circle-up{
            width: 80px;
            height: 40px;
            background-color: red;
            border-radius: 999px 999px 0 0;
        }
        .half-circle-down{
            width: 80px;
            height: 40px;
            background-color: red;
            border-radius: 0 0 40px 40px;
        }
        .half-circle-left{
            width: 40px;
            height: 80px;
            background-color: red;
            border-radius: 999px 0px 0 999px;
        }
        .half-circle-right{
            width: 40px;
            height: 80px;
            background-color: red;
            border-radius: 0 999px 999px 0;
        }
        .bullet{
            width: 16px;
            height: 70px;
            background-color: red;
            border-radius: 50% 50% 0 0;
        }

        /* Top edge triangle */
        .triangle-topleft{
            width: 0px;
            height: 0px;
            border-top: 80px solid red;
            border-right: 80px solid transparent;
        }
        .triangle-topright{
            width: 0px;
            height: 0px;
            border-top: 80px solid red;
            border-left: 80px solid transparent;
        }
        .triangle-bottomleft{
            width: 0px;
            height: 0px;
            border-bottom: 80px solid red;
            border-right: 80px solid transparent;
        }
        .triangle-bottomright{
            width: 0px;
            height: 0px;
            border-bottom: 80px solid red;
            border-left: 80px solid transparent;
        }

        /* Parallelogram */
        .parallelogram{
            width: 150px;
            height: 80px;
            margin-left: 40px;
            -webkit-transform: skew(-45deg);
            -moz-transform: skew(-45deg);
            -o-transform: skew(-45deg);
            transform: skew(-45deg);
            background-color: red;
        }



        /* Trapezoidal regular triangle plus a width */
        .trapezoid{
            border-bottom: 104px solid red;
            border-left: 60px solid transparent;
            border-right: 60px solid transparent;
            width: 100px;
            height: 0px;
        }

        /* hexagon */
        .pentagon{
            width: 54px;
            border-width: 50px 18px 0;
            border-style: solid;
            border-color: red transparent;
        }
        .pentagon:before{
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            top: -85px;
            left: -18px;
            border-width: 0 45px 35px;
            border-style: solid;
            border-color: transparent transparent red;
        }

        /* Rhombus two pairs of triangles */
        .rhombus{
            border-width: 52px 30px 0;
            border-style: solid;
            border-color: red transparent;
        }
        .rhombus:before{
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            top: -104px;
            left: -30px;
            border-width: 0 30px 52px;
            border-style: solid;
            border-color: transparent transparent red;
        }

        < span style = "box-sizing: border-box; margin-top: 1em; margin-bottom: 1em; margin-bottom: 1em; margin-bottom: 1em
        .infinity{
            width: 80px;
            height: 80px;
        }
        .infinity:before{
            width: 60px;
            height: 60px;
            border: 20px solid red;
            position: absolute;
            right: 0;
            content: "";
            border-radius: 50px 50px 0 50px;

            transform:rotate(-45deg);
        }
        .infinity:after{
            width: 60px;
            height: 60px;
            border: 20px solid red;
            position: absolute;
            content: "";
            /* left: auto; * /
            right: 0;
            border-radius: 50px 50px 50px 0;
            transform: translateX(113.13 px.) rotate(45deg); /* Move to a boundary and rotate */
            / * the transform: translateX (113.13 px); transform: rotate(45deg); * /
        }

        /* The width of the original element is calculated by two pseudo-elements (width+border-width) square and square root, two diagonal lengths -border intersects the hypotenuse half. Why subtract the hypotenuse by half */
        /* .infinity{ width: 212px; height: 100px; position: relative; } .infinity:before,.infinity:after{ width: 60px; height: 60px; top: 0; left: 0; border: 20px solid red; position: absolute; content: ""; border-radius: 50px 50px 0 50px; transform:rotate(-45deg); } .infinity:after{ left: auto; right: 0; border-radius: 50px 50px 50px 0; transform:rotate(45deg); } * /



        /* Extension 1 */
        .infinity-1{
            width: 150px;
            height: 100px;
        }
        .infinity-1:before,.infinity-1:after{
            width: 60px;
            height: 60px;
            top: 0;
            left: 0;
            border: 20px solid red;
            position: absolute;
            content: "";
            border-radius: 50px 50px 0 50px;

            -webkit-transform:rotate(-45deg);
            -ms-transform:rotate(-45deg);
            -moz-transform:rotate(-45deg);
            -o-transform:rotate(-45deg);
            transform:rotate(-45deg);
        }
        .infinity-1:after{
            border-radius: 50px 50px 50px 0;
        }

        /* Extend 2 water drop shape, a square with four corners rounded */
        .infinity-2{
            height: 100px;
            width: 160px;
        }
        .infinity-2:before{
            width: 60px;
            height: 60px;
            border: 20px solid red;
            position: absolute;
            content: "";
            border-radius: 50px 50px 0 50px;

            transform:rotate(-45deg);
        }

        /* Extension 3 water drop shape, the four corners of the border are rounded */
        .infinity-3{
            border: 20px solid red;
            border-radius: 100% 100% 0 100%;
            transform: rotate(-45deg);
        }

        /* Extension 4 */
        .infinity-4{
            width: 212px;
            height: 100px;
        }
        .infinity-4:before,.infinity-4:after{
            width: 60px;
            height: 60px;
            border: 20px solid red;
            position: absolute;
            content: "";
            border-radius: 50px 50px 0 50px;

            transform:rotate(-45deg);
        }
        .infinity-4:after{
            border-radius: 50px 50px 50px 0;

            transform:rotate(45deg);
        }

        / * * / eggs
        .egg{
            width: 126px;
            height: 180px;
            background-color: red;
            border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
            /* Equivalent to border-top-left-radius: 50% 60%; border-top-right-radius: 50% 60%; border-bottom-right-radius: 50% 40%; border-bottom-left-radius: 50% 40%; * /
        }

        /* Pentacle two low-waist triangles are superimposed to form four angles, plus a single triangle */
        .five-star{
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;

            -moz-transfrom:rotate(35deg);
            -webkit-transform:rotate(35deg);
            -ms-transform:rotate(35deg);
            -o-transform:rotate(35deg);
            transform:rotate(35deg);
        }
        .five-star:before{
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 80px solid red;
            position: absolute;
            top: -45px;
            left: -65px;
            content: "";
            -moz-transform:rotate(-35deg);
            -webkit-transform:rotate(-35deg);
            -ms-transform:rotate(-35deg);
            -o-transform:rotate(-35deg);
            transform:rotate(-35deg);
        }
        .five-star:after{
            width: 0;
            height: 0;
            position: absolute;
            top: 3px;
            left: -105px;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;
            content: "";
            -moz-transform:rotate(-70deg);
            -webkit-transform:rotate(-70deg);
            -ms-transform:rotate(-70deg);
            -o-transform:rotate(-70deg);
            transform:rotate(-70deg);
        }

        /* Share arrow */
        .share-arrow{
            width: 0;
            height: 0;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 70px solid red;

            -moz-transfrom:rotate(-45deg);
            -webkit-transform:rotate(-45deg);
            -ms-transform:rotate(-45deg);
            -o-transform:rotate(-45deg);
            transform:rotate(-45deg);
        }
        .share-arrow:before{
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 80px solid red;
            position: absolute;
            top: -47px;
            left: -63px;
            content: "";
            -moz-transform:rotate(-33deg);
            -webkit-transform:rotate(-33deg);
            -ms-transform:rotate(-33deg);
            -o-transform:rotate(-33deg);
            transform:rotate(-33deg);
        }

        /* Test tube cap */
        .circle-single-end {
            width: 50px;
            height: 80px;
            background-color: red;
            border-radius: 999px 999px 0 0; /* Any very large value */
        }
        .pill-shape {
            width: 40px;
            height: 80px;
            background-color: red;
            border-radius: 999px; /* Any very large value, or 999rem */
        }

        .circle-single-end-2 {
            width: 150px;
            height: 80px;
            background-color: red;
            border-radius: 50px 50px 0 0; /* 50px is a good pixel value */
        }
        /* A heart is made up of two cuboids with round ends that intersect at an inclined Angle */
        .heart-shape{
            top: -80px;
        }
        .heart-shape:before,.heart-shape:after{
            width: 50px;
            height: 80px;
            left: 50px;
            background-color: red;
            position: absolute;
            content: "";
            border-radius: 50px 50px 0 0;
        }
        .heart-shape:before{/* Rotate counterclockwise around the tip of the center of the circle45C * / - its - transform - origin:0 100%;
            -ms-transform-origin:0 100%;
            -moz-transform-origin:0 100%;
            -o-transform-origin:0 100%;
            transform-origin:0 100%;

            -webkit-transform:rotate(-45deg);
            -ms-transform:rotate(-45deg);
            -moz-transform:rotate(-45deg);
            -o-transform:rotate(-45deg);
            transform:rotate(-45deg);
        }
        .heart-shape:after{
             left: 0;
             /* Rotate 45 degrees clockwise around the tip of the center of the circle */
            -webkit-transform-origin:100% 100%;
            -ms-transform-origin:100% 100%;
            -moz-transform-origin:100% 100%;
            -o-transform-origin:100% 100%;
            transform-origin:100% 100%;

            -webkit-transform:rotate(45deg);
            -ms-transform:rotate(45deg);
            -moz-transform:rotate(45deg);
            -o-transform:rotate(45deg);
            transform:rotate(45deg);
        }

        /* Diamond trapezoid plus triangle */
        .diamond{
            transform: translateY(-70px);
            width: 50px;
            height: 0;
            border-style: solid;
            border-color: transparent transparent red transparent;
            border-width: 0 25px 25px 25px;
        }
        .diamond:after{
            top: 25px;
            left: -25px;
            border-style: solid;
            border-color: red transparent transparent transparent;
            border-width: 70px 50px 0 50px;
            position: absolute;
            content: "";
        }

        /* Two colored semicircles */
        .two-color-boll{
            width: 12px;
            height: 12px;
            background-color: #fff;
            border: 18px solid;
            border-radius: 100%;
        }
        /* cs disc shape */
        .cd-shape{
            width: 12px;
            height: 12px;
            background-color: #fff;
            border: 18px solid;
            border-radius: 100%;
        }

        /* Taiji figure is composed of two colored balls + CD shape */
        .yin-yang{
            width: 96px;
            height: 48px;
            background-color: #fff;
            border-style: solid;
            border-width: 2px 2px 50px 2px;
            border-radius: 100%;
        }
        .yin-yang:before {
            width: 12px;
            height: 12px;
            top: 50%;
            left: 0;
            content: "";
            position: absolute;
            background-color: #fff;
            border: 18px solid;
            border-radius: 100%;
        }
        .yin-yang:after {
            width: 12px;
            height: 12px;
            top: 50%;
            left: 50%;
            background-color: # 151313;
            border: 18px solid #fff;
            border-radius:100%;
            content: "";
            position: absolute;
        }

        /* Radio box effect evolved from Tai Chi */
        .radio-box{
            width: 96px;
            background-color: # 151313;
            border-style: solid;
            border-width: 2px 2px 50px 2px;
        }
        .radio-box:before {
            width: 12px;
            height: 12px;
            top: 50%;
            left: 0;
            content: "";
            position: absolute;
            background-color: # 151313;
            border: 18px solid #fff;
            border-radius: 100%;
        }
        .radio-box:after {
            width: 12px;
            height: 12px;
            top: 50%;
            left: 50%;
            background-color: # 151313;
            border: 18px solid #fff;
            border-radius:100%;
            content: "";
            position: absolute;
        }

    </style>
</head>
<body>
    <div class="icon six-star"></div>
    <div class="icon arrow"></div>
    <div class="icon pacman"></div>
    <div class="icon pacman-ext1"></div>
    <div class="icon circle"></div>
    <div class="icon circle2"></div>
    <div class="icon ring"></div>

    <br><br><br>
    <div class="icon half-circle-up"></div>
    <div class="icon half-circle-down"></div>
    <div class="icon half-circle-left"></div>
    <div class="icon half-circle-right"></div>
    <div class="icon bullet"></div>

    <div class="icon triangle-topleft"></div>
    <div class="icon triangle-topright"></div>
    <div class="icon triangle-bottomleft"></div>
    <div class="icon triangle-bottomright"></div>

    <br><br><br>


    <div class="icon parallelogram"></div>
    <div class="icon trapezoid"></div>
    <div class="icon pentagon"></div>
    <div class="icon rhombus"></div>
    <div class="icon infinity"></div>

    <br><br>
    <div class="icon infinity-1"></div>
    <div class="icon infinity-2"></div>
    <div class="icon infinity-3"></div>
    <div class="icon infinity-4"></div>

    <div class="icon egg"></div>

    <br><br><br><br><br>
    <div class="icon five-star"></div>
    <div class="icon share-arrow"></div>
    <div class="icon circle-single-end"></div>
    <div class="icon pill-shape"></div>
    <div class="icon circle-single-end-2"></div>
    <div class="icon heart-shape"></div>

    <br><br><br><br><br>
    <div class="icon diamond"></div>
    <div class="icon two-color-boll"></div>
    <div class="icon cd-shape"></div>
    <div class="icon yin-yang"></div>
    <div class="icon radio-box"></div>

</body>
</html>
Copy the code
Several graphical examples of pure CSS implementations

Related Posts

Chapter 7 Functions Function expressions

Dianping small program development experience – release and promotion

Classic closure
