Div with content inside a perfect circle - css

Question

I'm trying to replicate the
following mockup
just to practice to place a square inside the circle but this is as close as I can get,
I tried using JS but just get weird looking circles.
This is my code
Index.html
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
height: auto;
flex: 0 1 30%;
border-radius: 100%;
border: 2px solid orange;
text-align:center;
}
.action img {
width: 30px;
}
.action div {
border: 2px dashed black;
height : auto;
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>

Answer 1

There are a lot of little elements here. First of all, don't be afraid to use multiple wrapping divs when you have a lot of behaviors to handle rather than trying to put too many responsibilities on too few elements.
You already have the width set using flex-basis.
To make the circles have a fixed 1:1 width to height ratio you can use 50% border, height of 0, and padding-top 100%. That last bit is tricky but padding top or bottom with a percentage is a percentage of the width.
To center the squares, use another div with absolute position, top 50% and left 50% and then translate:transform( -50%, -50% ). The translate values are a percentage of the element itself and the top and left positioning percentages are percentages of the parent.
To add padding to the square without affecting it's size, use box-sizing: border-box
Finally, I used width and height of 72% to get the squares to contact the circles. That's pretty close to the ( square root of 2 ) / 2 * 100% which is 70.7% but it worked for me with your border thicknesses.
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
flex: 0 1 30%;
text-align: center;
}
.action img {
width: 30px;
}
.action__container-circle {
border-radius: 50%;
border: 2px solid orange;
height: 0;
padding-top: 100%;
position: relative;
}
.action__content-square {
border: 2px dashed black;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate( -50%, -50%);
width: 72%;
height: 72%;
box-sizing: border-box;
padding: 5px;
overflow: hidden;
}
<div class="action-selection">
<div class="action">
<div class="action__container-circle">
<div class="action__content-square">
<img src="img/phone.png">
<p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
</div>
<div class="action">
<div class="action__container-circle">
<div class="action__content-square">
<img src="img/phone.png">
<p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
</div>
<div class="action">
<div class="action__container-circle">
<div class="action__content-square">
<img src="img/phone.png">
<p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>
</div>

Answer 2

The trick with creating perfect circles that are dependent on the viewport width is to use width and the same value for padding-top. Padding percentage, is based on width, whereas if you used a height percentage, that would be based on the height of the parent.
In this case, if you're basically using width: 30% then you'd use padding-top: 30%, and then set the content to position: absolute and then just center it inside the relatively positioned circle. You'll likely have to fiddle around with the exact width/height combo that you want, but this'll get you the perfect circle you're looking for.
Note there's no way though CSS only to calculate the exact points where the internal square/rectangle should meet the external circle. That would require more complex math than what CSS calc can do, because you'd have to determine that based on the height of the content inside the rectangle and adjust your width from there.
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
height: auto;
flex: 0 1 30%;
position: relative;
padding-top: 30%;
border-radius: 100%;
border: 2px solid orange;
text-align:center;
display: flex;
}
.action img {
width: 30px;
}
.action div {
border: 2px dashed black;
position: absolute;
top: 50%;
left: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transform: translate(-50%, -50%);
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>

Answer 3

.action-selection {
display: flex;
justify-content: space-between;
}
.action {
border-radius: 50%;
border: 2px solid orange;
text-align: center;
height: 200px;
width: 200px;
}
.action img {
width: 30px;
}
.action div {
border: 2px dashed black;
/* height: auto; */
width: 75%;
margin-left: 50%;
margin-top: 50%;
transform: translate(-50%, -50%);
height: 65%;
}
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png">
<p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png">
<p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png">
<p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>

Answer 4

hey check this please add the code in your page then it will look as per your requirement.
.action-selection {
display: flex;
justify-content: space-between;
}
.action {
border: 2px solid orange;
text-align: center;
width: 250px;
height: 250px;
position: relative;
border-radius:100%;
}
.action div {
border: 2px dashed black;
height: 125px;
position: absolute;
left: 0;
top: 52px;
padding-top: 15px;
width: 200px;
right: 0;
margin: auto;
}
.action img {
width: 30px;
}
<div class="action-selection">
<div class="action">
<div><img src="img/phone.png"><p>I'm already lincenced and I want to join BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm licensed but I'd like to know more about BeUrban</p>
</div>
</div>
<div class="action">
<div>
<img src="img/phone.png"><p>I'm ready to start my career with BeUrban</p>
</div>
</div>
</div>