CODEWITHSUNDEEP
htmlcss
Clive van Hilten
Clive van Hilten

Reputation: 881

Using CSS to generate inner and outer circles

Following the guide here, I've been working on generating circles using CSS. I've done the basics but am stuck trying to get one CSS-generated circle superimposed on top of another. My Fiddle is here.

I'd like to:

  1. adjust the positioning of the inner circles containing the text - I'm unable to get it lined up properly on the outer circle. The idea is that each circle will be composed of an outer circle and an inner circle, and each inner circle will contain the appropriate text.
  2. get the text to line up correctly so that it's centred vertically and horizontally in the inner circle
  3. get all three of the circles on the same horizontal line.

Pasted below is an image of the way I'd like to get the circles to display.

Can anyone help, please?

3 circles

HTML:

<div id="law-outer-circle" class="circle"><div id="law-inner-circle" class="circle">Law firms</div></div>   
<div id="industry-outer-circle" class="circle"><div id="industry-inner-circle" class="circle">Industry</div></div>
<div id="in-house-outer-circle" class="circle"><div id="in-house-inner-circle" class="circle">In-house counsel</div></div>

CSS:

.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;

/* text styling */
font-size: 45px;
color: #FFF;
line-height: 75px;
text-align: center;
font-family: Arial;
}

#industry-inner-circle {
width: 250px;
height: 250px;
background: #DD4814;
position: absolute;
top: 24%; 
left : 24%;
display: block;
border: 2px solid #fff;
}

#industry-outer-circle {
background: #DD4814;
width: 270px;
height: 270px;
position:relative;
}

#in-house-inner-circle {
width: 250px;
height: 250px;
background: #AEA79F;
position: absolute;
top: 24%; 
left : 24%;
display: block;
border: 2px solid #fff;
}

#in-house-outer-circle {
background: #AEA79F;
width: 270px;
height: 270px;
position:relative;
}

#law-inner-circle {
width: 250px;
height: 250px;
background: #5E2750;
position: absolute;
top: 24%; 
left : 24%;
display: block;
border: 2px solid #fff;
}

#law-outer-circle {
background: #5E2750;
width: 270px;
height: 270px;
position:relative;
}

Upvotes: 2

Views: 4563

Answers (2)

Morpheus
Morpheus

Reputation: 9065

Give .circle { line-height: 250px; } (same as your inner circle height) and change inner circle top and left values to 8px (outerCircleHeight - innerCircleHeight - bothSidesBorder / 2 = 8).

#industry-inner-circle {
    top: 8px;
    left : 8px;
}

jsfiddle example

Upvotes: 1

agriboz
agriboz

Reputation: 4854

You could do it in this way using css box-shadow property.

Html

<div class="circle color-1 color1-box-shadow">
    industry
</div>
<div class="circle text color-2 color2-box-shadow">
    In-house legal counsel
</div>
<div class="circle color-3 color3-box-shadow">
    Law Firms
</div>

Css

.circle {
    border-radius: 50%;
    float: left;
    display: inline-block;
    margin-right: 20px;
    /* text styling */
    font-size: 45px;
    width: 250px;
    height: 250px;
    color: #FFF;  border: 2px solid #fff;
    line-height: 250px;
    text-align: center;
    font-family: Arial;
}
.color-1 { background: #DD4814;}
.color-2 { background: #AEA79F; }
.color-3 { background: #5E2750; }
.color1-box-shadow { box-shadow: 0px 0px 1px 1px #DD4814 }
.color2-box-shadow { box-shadow: 0px 0px 1px 1px #AEA79F }
.color3-box-shadow { box-shadow: 0px 0px 1px 1px #5E2750 }
.text { line-height: 45px; padding-top: 50px; height: 200px }

Example

Upvotes: 2

Related Questions