Circle problem

by Laura Kishimoto

HTML

<!-- 
  https://twitter.com/chicgeek/status/1164273744505974784

  I've got a great CSS math problem. Anyone up for the challenge?

  I have circles within columns. The columns have a responsive width but the gutters are fixed. How do I calculate the width and angle for a decorative line like in this image?
-->

<section class="wrap">
  <div class="column">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="50" />
    </svg>
    <p>
      Some other content…
    </p>
  </div>
  <div class="column">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50" cy="50" r="50" />
    </svg>
    <p>
      Chocolate bar danish pastry. Ice cream danish marzipan fruitcake liquorice. Pie gingerbread apple pie.
    </p>
  </div>
</section>

SCSS

$gutter: 2rem;

.column {
  padding: $gutter;

  &+& {

    /* 
      Red line
      
      How do we get the length and angle of the line?
      
      This will likely need to take into account:
        * column content width (using 100% width?)
        * $gutter
    */
    
    &:after {
      $line-position: 82.5%;
      $angle: calc(45deg);
      position: absolute;
      top: 0;
      right: $line-position;
      padding-top: $line-position;
      width: 100%; // calculate this
      border-bottom: 1px solid;
      border-color: red;
      transform: translate($gutter/2, -$gutter/2) rotate(calc(var(width) * $angle));
      transform-origin: bottom right;
    }
  }
}






























/* other styles down here to reduce distraction */
.wrap {
  display: flex;
}

.column {
  flex: 1 0 1%;
  outline: 1px solid #ccc;
  position: relative;

  &+& {
    &:after {
      content: "";
      display: block;
    }
  }

  // temp: to provide a visual baseline
  &:before {
    content: "";
    display: block;
    border-bottom: 1px solid white;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50%;
    width: 100%;
    transform: rotate(-45deg);
    transform-origin: bottom;
  }
}