Roundsign

by matmat

HTML

<div class='roundsign'> 
	<div class='contentroundsign'>
	    <div class='Innerroundsign'>
            a
         </div>    
	</div> 
</div>

CSS

.roundsign{
	position: absolute;
    top:10%;
    left:50%;
    margin-left:-150px;
	width: 500px;		/* desired width */
    background:gainsboro;
    border-radius:100%;
}
.roundsign:before{
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
}
.contentroundsign{
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
    padding-left:10%;
    padding-right:10%;
    padding-top:40%;
    padding-bottom:40%;
}
.Innerroundsign{
    background:red;
    height:100%;
}