Responsible circle based on its content

Question

I have this example. JSFIDDLE contains a circle, but I have problems with its contents according to it , in the above example, when the content is long, it overflows the circle.

.cd-single-point { margin:50px; position: absolute; border-radius: 50%; } .cd-single-point > a { position: relative; text-align:center; padding:2px; text-decoration: none; z-index: 2; display: block; width: 20px; height: 20px; border-radius: inherit; background: #d95353; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-single-point::after { /* this is used to create the pulse animation */ content: ''; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; border-radius: inherit; background-color: transparent; -webkit-animation: cd-pulse 2s infinite; -moz-animation: cd-pulse 2s infinite; animation: cd-pulse 2s infinite; } 

How can I achieve this with css only ?

Answer 1

You can use the padding method on the pseudo-element to keep the aspect ratio of the circle and make it responsive according to it:

Demo

HTML:

 <div class="wrap"> <div class="in">[phone]</div> </div> 

CSS:

 .wrap{ color: #fff; position:relative; display:inline-block; } .in{ padding:60% 10%; margin-top:-0.6em; } .in:after{ content:''; position:absolute; top:0; left:0; width:120%; padding-bottom:120%; background-color:#D95353; border-radius:50%; z-index:-1; } 

Answer 2

How about this fiddle? http://jsfiddle.net/ctwheels/bgut7411/9/

HTML

 <ul> <li> <div class="cd-single-point"> <a class="cd-img-replace" href="#"> <div class="takeNumber">+99</div> </a> </div> </li> <!-- .cd-single-point --> </ul> 

CSS

 /* -------------------------------- Primary style -------------------------------- */ html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-size: 100%; font-family:"Roboto", sans-serif; color: #33435a; background-color: #3c4f6a; } .cd-single-point { margin:50px; position: absolute; border-radius: 50%; } .cd-single-point > a { position: relative; text-align:center; padding:5px; text-decoration: none; z-index: 2; display: block; min-width: 20px; min-height: 20px; border-radius: inherit; background: #d95353; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .cd-single-point::after { /* this is used to create the pulse animation */ content:''; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; border-radius: inherit; background-color: transparent; -webkit-animation: cd-pulse 2s infinite; -moz-animation: cd-pulse 2s infinite; animation: cd-pulse 2s infinite; } @-webkit-keyframes cd-pulse { 0% { -webkit-transform: scale(1); box-shadow: inset 0 0 5px 5px rgba(217, 83, 83, 0.8); } 50% { box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8); } 100% { -webkit-transform: scale(1.6); box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0); } } @-moz-keyframes cd-pulse { 0% { -moz-transform: scale(1); box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8); } 50% { box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8); } 100% { -moz-transform: scale(1.6); box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0); } } @keyframes cd-pulse { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8); } 50% { box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0.8); } 100% { -webkit-transform: scale(1.6); -moz-transform: scale(1.6); -ms-transform: scale(1.6); -o-transform: scale(1.6); transform: scale(1.6); box-shadow: inset 0 0 1px 1px rgba(217, 83, 83, 0); } } .takeNumber { color:white; font-family:Verdana; font-size:12px; padding-top:3px; } 

Js

 var numItems = $(".cd-single-point").length; var myHeight, myWidth; for (i = 0; i < numItems; i++) { myWidth = $(".cd-single-point>a:eq(" + i + ")").width(); myHeight = $(".cd-single-point>a:eq(" + i + ")").height(); if (myWidth > myHeight) { $(".cd-single-point>a:eq(" + i + ")").css({ height: myWidth + "px" }); } if (myWidth < myHeight) { $(".cd-single-point:eq(" + i + ")>a").css({ width: myHeight + "px" }); } $(".takeNumber:eq(" + i + ")").css({ "line-height": myWidth - parseInt($(".cd-single-point>a:eq(" + i + ")").css("padding"), 10) + "px" }); } 

Answer 3

If you are not against any kind of javascript, you can check the width of the content and then set the equivalent height.

 $(function(){ var elementWidth = $(".takeNumber").width(); $(".cd-img-replace").css("height", elementWidth); }); 

Fiddle

Answer 4

Demo

CSS

 .cd-single-point { height: 30px; min-width: 30px; width: auto; line-height: 30px; text-align: center; margin:50px; position: absolute; border-radius: 50%; } .cd-single-point > a { display: block; height: 30px; min-width: 30px; width: auto; line-height: 30px; text-align: center; position: relative; text-decoration: none; z-index: 2; border-radius: inherit; background: #d95353; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3); -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s; } .takeNumber { color:white; font-family:Verdana; font-size:12px; padding: 0 5px; }