Single DIV Pokeball ~ CODING-GREED

Saturday, 17 September 2022

Single DIV Pokeball

September 17, 2022 – by @ditya Raj 1 comment

MAKING SINGLE DIV ELEMENT POKEBALL

HTML:

<html>
    <head></head>
    <body>
        <div></div>
    </body>

    <style>

CSS:

 html{
            background: #6CB3A9;
        }

        div{
            width: 250px;
            height: 50px;
            background: #781728;
            position: absolute;
            transform: translate(-50%,-50%);
            top: 50%;
            left: 50%;
        }

        div:before{
            content: '';
            position: absolute;
            width: 280px;
            height: 280px;
            background: linear-gradient( #D25B70 0px 125px,transparent 125px 155px,
                                            #FFFFFF 155px 280px);
            border-radius: 100%;
            top: -120px;
            left: -15px;
        }

        div:after{
            content: '';
            position: absolute;
            width: 110px;
            height: 110px;
            background:  #F6DF96;
            border-radius: 100%;
            border: 15px solid #781728;
            top: -40px;
            left: 50px;
        }