css code for shapes

by Mohammed Fayoumi

CSS

.shape {
            width: 150px;
            height: 150px;
            float: left;
            margin: 10px;
        }

        .circle {
            background-color: red;
            border-radius: 50%;
        }

        .square {
            background-color: blue;
        }

        .triangle {
            width: 0;
            height: 0;
        }

        .triangle.up {
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 150px solid orange;
        }

        .triangle.right {
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 150px solid green;
        }

        .triangle.down {
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            border-top: 150px solid #49A5C4;
        }

        .triangle.left {
            border-top: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-right: 150px solid #A549C4;
        }

        /* Animations */

        .shape.animate {
            animation-name: stretch;
            animation-duration: 1.0s;
            animation-timing-function: ease-out;
        }

        @keyframes stretch {
            0% {
                transform: scale(.3);
            }
            100% {
                transform: scale(1.0);
            }
        }