Tuesday, September 8, 2015

Create Responsive Circle



About

Let’s see how to create a responsive circle with use of DIV tag in HTML

CSS

First we need to write some css for the circle:
.circle {
            margin-left: auto;
            margin-right: auto;
            border-radius: 50%;
            width: 100%;
            position: relative;
            border: 3px solid #D21009;
            background-color: #d9534f;
        }

        .circle:before {
            content: "";
            display: block;
            padding-top: 100%;
        }

        .circle-inner {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            text-align: center;
        }

        .circle-text {
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1em;
            line-height: 1em;
            font-size: 2em;
            color: white;
        }

HTML

<div class="circle" style="width:100px; height:100px;">
        <div class="circle-inner">
            <div class="circle-text">
                999
            </div>
        </div>
    </div>