Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Make a shape using css

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 317
    Comment on it

    Hello reader !

    If you want to make a shape using pure css (after and before pseudo Elements) without using any images follow the code below.

    .wrapper{
        height: 220px;
        width:500px;
        margin: 0 auto;
    }
    .wrapper .midtop{
        margin: 0 auto;
    }
    .midbot{
        margin: 0 auto;
        transform: rotate(-180deg);
        top:20px;
    }
    .rightone{
        float: right;
        right: 120px;
        top: -40px;
        transform: rotate(90deg);
    
    }
    .leftone{
        float: left;
        left: 120px;
        top: -40px;
        transform: rotate(-90deg);
    }
    #shape { 
        width: 0;
        height: 0;
        border-left: 70px solid transparent;
        border-right: 70px solid transparent;
        border-top: 100px solid red;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        position: relative;
    
    }
    #shape:hover{
        border-top: 100px solid #ccc;
    }
    #shape:after{
        background: #fff;
        border-radius: 70px;
        content: "";
        display: block;
        height: 100px;
        left: -50px;
        position: relative;
        top: -40px;
        width: 100px;
    }
    

    html:-

    <div class="wrapper">
        <div id="shape" class="midtop"></div>
        <div id="shape" class="rightone"></div>
        <div id="shape" class="leftone"></div>
        <div id="shape" class="midbot"></div>
    </div>
    

 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: