Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Create shapes using css

    • 0
    • 3
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.35k
    Comment on it

    Hello readers!

    In this blog we will discuss how to make shapes using css only. to make any shape we have to know mainly about 2 pseudo Elements.

    ::before :- We can use this element to insert some content before an element.

    ::after :- We can use this element to insert some content after an element.


    Star (Six-corner) :-

    <div id='star-six'></div>
    #star-six {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 100px solid #333;
        position: relative;
    }
    #star-six:after {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 100px solid #333;
        position: absolute;
        content: "";
        top: 30px;
        left: -50px;
    }
    

    Star (Five-corner)

    #star-five {
       margin: 50px 0;
       position: relative;
       display: block;
       color: #333;
       width: 0px;
       height: 0px;
       border-right:  100px solid transparent;
       border-bottom: 70px  solid #333;
       border-left:   100px solid transparent;
       -moz-transform:    rotate(35deg);
       -webkit-transform: rotate(35deg);
       -ms-transform:     rotate(35deg);
       -o-transform:      rotate(35deg);
    }
    #star-five:before {
       border-bottom: 80px solid #333;
       border-left: 30px solid transparent;
       border-right: 30px solid transparent;
       position: absolute;
       height: 0;
       width: 0;
       top: -45px;
       left: -65px;
       display: block;
       content: '';
       -webkit-transform: rotate(-35deg);
       -moz-transform:    rotate(-35deg);
       -ms-transform:     rotate(-35deg);
       -o-transform:      rotate(-35deg);
    
    }
    #star-five:after {
       position: absolute;
       display: block;
       color: #333;
       top: 3px;
       left: -105px;
       width: 0px;
       height: 0px;
       border-right: 100px solid transparent;
       border-bottom: 70px solid #333;
       border-left: 100px solid transparent;
       -webkit-transform: rotate(-70deg);
       -moz-transform:    rotate(-70deg);
       -ms-transform:     rotate(-70deg);
       -o-transform:      rotate(-70deg);
       content: '';
    }
    

    Pentagon :-

    #pentagon {
        position: relative;
        width: 54px;
        border-width: 50px 18px 0;
        border-style: solid;
        border-color: #333 transparent;
    }
    #pentagon:before {
        content: "";
        position: absolute;
        height: 0;
        width: 0;
        top: -85px;
        left: -18px;
        border-width: 0 45px 35px;
        border-style: solid;
        border-color: transparent transparent #333;
    }
    

    Hexagon:-

    #hexagon {
        width: 100px;
        height: 55px;
        background: #333;
        position: relative;
    }
    #hexagon:before {
        content: "";
        position: absolute;
        top: -25px; 
        left: 0;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid #333;
    }
    #hexagon:after {
        content: "";
        position: absolute;
        bottom: -25px; 
        left: 0;
        width: 0;
        height: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid #333;
    }
    

    Octagon:-

    #octagon {
        width: 100px;
        height: 100px;
        background: #333;
        position: relative;
    }
    
    #octagon:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;    
        border-bottom: 29px solid #333;
        border-left: 29px solid #eee;
        border-right: 29px solid #eee;
        width: 42px;
        height: 0;
    }
    
    #octagon:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;    
        border-top: 29px solid #333;
        border-left: 29px solid #eee;
        border-right: 29px solid #eee;
        width: 42px;
        height: 0;
    }
    

    Heart :-

    #heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    #heart:before,
    #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: #333;
        -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%;
    }
    

    Egg:-

     #egg { display:block;
        width: 126px; height: 180px; 
        background-color: #333; 
        -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
         border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; }
    

    Talkbubble:-

    { 
        width: 120px;
        height: 80px;
        background: #333; 
        position: relative;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px; 
    } 
    #talkbubble:before 
    { 
        content:"";
        position: absolute;
        right: 100%;
        top: 26px;
        width: 0;
        height: 0; 
        border-top: 13px solid transparent; 
        border-right: 26px solid #333; 
        border-bottom: 13px solid transparent; 
    } 
    

    Yin-yang :-

    { 
        width: 96px; 
        height: 48px; 
        background: #fff; 
        border-color: #333; 
        border-style: solid; 
        border-width: 2px 2px 50px 2px; 
        border-radius: 100%; 
        position: relative; 
    } 
    #yin-yang:before 
    { 
        content: ""; 
        position: absolute; 
        top: 50%; 
        left: 0; 
        background: #eee; 
        border: 18px solid #333; 
        border-radius: 100%; 
        width: 12px; 
        height: 12px; 
    } 
    #yin-yang:after 
    { 
        content: ""; 
        position: absolute; 
        top: 50%; 
        left: 50%; 
        background: #333; 
        border: 18px solid #fff; 
        border-radius:100%; 
        width: 12px; 
        height: 12px; 
    }
    

    TV screen:-

    #tv{ 
        position: relative; 
        width: 200px; 
        height: 150px; 
        margin: 20px 0; 
        background: #333; 
        border-radius: 50% / 10%; color: white; 
        text-align: center; text-indent: .1em; 
    } 
    #tv:before 
    { 
        content: ''; 
        position: absolute; 
        top: 10%; 
        bottom: 10%; 
        right: -5%; 
        left: -5%; 
        background: inherit; 
        border-radius: 5% / 50%; 
    }
    

    Cone: -

    #cone 
    { 
        width: 0; 
        height: 0; 
        border-left: 70px solid transparent; 
        border-right: 70px solid transparent; 
        border-top: 100px solid #333; 
        -moz-border-radius: 50%; 
        -webkit-border-radius: 50%; 
        border-radius: 50%; 
    }
    

    Diamond:-

    #diamond 
    { 
        border-style: solid; 
        border-color: transparent transparent #333 transparent; 
        border-width: 0 25px 25px 25px; 
        height: 0; width: 50px; 
        position: relative; 
        margin: 20px 0 50px 0; 
    } 
    #diamond:after 
    { 
        content: ""; 
        position: absolute; 
        top: 25px; left: -25px; 
        width: 0; 
        height: 0; 
        border-style: solid; 
        border-color: #333 transparent transparent transparent; 
        border-width: 70px 50px 0 50px; 
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: