CSS - Align diagonal line inside concentric circles

user_19293623 0
Viewed 72

I am stuck on how to align this diagonal line inside the inner circle. I have tried using position: absolute and display: flex and other methods, but cannot seem to get something that works.

enter image description here

jsFiddle: https://jsfiddle.net/Kaevonz/7edw8yuq/20/

.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: 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;
}

.div4 {
  border-top: 1px dashed #f00;
  width: 50%;
  transform: rotate(-45deg);
  transform-origin: top middle;
}
<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2">
    <div class="elem div3">
      <div class="elem div4">
      </div>
    </div>
  </div>
</div>

css html
2 Answers

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>

user_28020400

Use position:absolute and make it relative to the outer container:

.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: 70px;
  background: white;
}

.div2 {
  border: 1px solid blue;
  border-radius: 50%;
  width: 200px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.div3 {
  border: 1px solid green;
  border-radius: 50%;
  width: 180px;
  aspect-ratio: 1;
}

.div4 {
  border-top: 1px dashed #f00;
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2">
    <div class="elem div3">
      <div class="elem div4">
      </div>
    </div>
  </div>
</div>

I would also simplify your code a little like below:

.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: solid #0DA8AA;
  border-width: 3px 1px 0;
  height: 70px;
  aspect-ratio: 1;
}

.div2 {
  border: 1px solid blue;
  border-radius: 50%;
  width: 200px;
  aspect-ratio: 1;
  display: grid;
  position: relative;
}
.div2:before {
  content:"";
  border-top: 1px dashed #f00;
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.div2:after {
  content: "";
  border: 1px solid green;
  border-radius: 50%;
  margin: 10px;
}
<div class="container">
  <div class="elem div1"></div>
  <div class="elem div2"></div>
</div>

user_86203330
Related