Concentric Circles with CSS

Creating concentric circles in CSS

I can't see any way around specifying exact dimensions (with equal width/height) for the outermost circle. You can give it its own class

<div class="inner-two container">
.container {
    width: 100px;
    height: 100px;
    margin: 1%;
}

The inner circles will be concentric with borders/padding if they are set to box-sizing: border-box since the border/padding will be included in the dimensions. margin is not included in this and is thus undesirable. You also need to specify height: 100%.

http://jsfiddle.net/4yL2m/8/

Note that the containing div does not also have to be one of the circle divs; it just can be.

Note in order to use it for firefox you need to set -moz-box-sizing: border-box; as well as boxing-sizing: border-box;.

CSS concentric circles with orbiting planets

Since it's about circles you can rely on rotation where you simply need to know the distance from the center (the radius). You can also optimize the concentric circles by using less elements.

Here is an example where I will be using CSS variables to easily control each element. Note that the order of transformation is important (we center using translate, we rotate, then we translate again)

.orbit{

  width:150px;

  height:150px;

  padding:30px;

  border-radius:50%;

  background:red content-box;

  border:1px solid red; /*1st orbit at 105px (30px + 150px/2) */

  margin:auto;

  position:relative;

}

/* 2nd at 135px  */

.orbit:before,

.orbit:after{

   content:"";

   position:absolute;

   top: var(--o,-30px);

   bottom: var(--o,-30px);

   left: var(--o,-30px);

   right: var(--o,-30px);

   border:inherit;

   border-radius:inherit

}

/* 3rd orbit at 165px*/

.orbit:after {

  --o:-60px;

}

.orbit span {

  position:absolute;

  z-index:1;

  height:20px;

  width:20px;

  background:blue;

  border-radius:inherit;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%) rotate(var(--r,0deg)) translateX(var(--d,0px));

}

body {

  margin:0;

  height:100vh;

  display:flex;

}

<div class="orbit">

    <span style="--d:105px;--r:80deg"></span>

    <span style="--d:105px;--r:120deg"></span>

    <span style="--d:105px;--r:-80deg"></span>

    <span style="--d:135px;--r:80deg;height:30px;width:30px;background:green"></span>

    <span style="--d:135px;--r:-90deg;height:30px;width:30px;background:green"></span>

    <span style="--d:165px;--r:-45deg"></span>

    <span style="--d:165px;--r:200deg;height:50px;width:50px;background:purple"></span>

</div>

CSS - Add tangent rectangle onto top of concentric circles

You are already using a relative position for div2, so i would use a position: absolute on div5:

.div5 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border: 0.5px dashed black;
  width: 120px;
  height: 80px;
}

The transform property, combined with the left property is to make sure that your element is centered.

Then, i would remove your div4 from div3, because it looks like you're creating relationships between divs that don't seem to be necessary (Unless there is a mathematical reason for that):

<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2">
    <div class="elem div3">
      <div class="elem div5">
      </div>
      <div class="elem div4">
      </div>
    </div>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 500px;
  border: 1px solid gray;
}

.elem {
  box-sizing: border-box;
}

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 70px;
  width: 120px;
  background: white;
}

.div2 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.div3 {
  border: 1px solid #0DA8AA;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: white;
}

.div4 {
  border-top: 0.5px dashed black;
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

.div5 {
  border: 0.5px dashed black;
  width: 120px;
  height: 80px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  left: 50%;
}

 <div class="container">
   <div class="elem div1"></div>
   <div class="elem div2">
     <div class="elem div3">
       <div class="elem div5">
       </div>
       <div class="elem div4">
     </div>
   </div>
 </div>

CSS - Align diagonal line inside concentric circles

You can center the line using flexbox on div3

  display: flex;
  align-items: center;
  justify-content: center;

Then adjust the transform of the line as required.

I'm assuming from the design this is supposed to be an clock of some kind and this a "second hand".

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 500px;
  border: 1px solid gray;
}

.elem {
  box-sizing: border-box;
}

.div1 {
  border-top: 3px solid #0DA8AA;
  border-left: 1px solid #0DA8AA;
  border-right: 1px solid #0DA8AA;
  height: 70px;
  width: 70px;
  background: white;
}

.div2 {
  border: 1px solid blue;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div3 {
  border: 1px solid green;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.div4 {
  border-top: 1px dashed #f00;
  width: 50%;
  transform: translateX(-50%) rotate(90deg);
  transform-origin: right;
  animation: spin 5s linear infinite;
}

@keyframes spin {
  0% {
    transform: translateX(-50%) rotate(90deg);
  }
  100% {
    transform: translateX(-50%) rotate(450deg);
  }
}

<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2">
    <div class="elem div3">
      <div class="elem div4">
      </div>
    </div>
  </div>
</div>

How can I make concentric circles in HTML respond to mouseOver properly?

This would be hard with pure images as it's difficult to tell when the mouse is actually over the circle part of the image. I would suggest a client side image map as they let you define clickable areas in non-rectangular shapes. Set the href to something like "javascript:circleClicked(); void 0;" :D

---

Related Topics