#43 wrench - help me understand why my result is not symmetric and stuck at 99.9%

[ruanha]

I hope someone can tell me why the rendered shape is off at the bottom, but not the top, as seen from the diff:

I would expect it to be symmetric, so it would also be off at the top? What am I missing?

Here is the full shapes:

Here is the code: https://github.com/ruanha/cssbattle/blob/main/8-transition/43-wrench.html

<div></div>
<div></div>

<style>
  body {
    background: #6592CF;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  div {
    width: 40px;
    height: 180px;
    background: #6592CF;
    border-radius: 0 70px 70px 0;
    border: 30px solid #243D83;
    border-left: 0;
    margin: -15px;
  }
  div:nth-child(2) {
    transform: scaleX(-1);
  }
</style>

[aarthvaen]

Here's what I did to make your solution work:

<div></div>
<div></div>

<style>
  body {
    background: #6592CF;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  div {
    width: 40px;
    height: 182px;
    background: #6592CF;
    border-radius:0 70px 70px 0;
    border: 30px solid#243D83;
    border-left: 0;
    margin:-15px -15px -17px;
  }
  div:nth-child(2) {
    transform: scaleX(-1);
  }
</style>

Increasing div's height by 2px and add the additional left & bottom margins (also a 2px difference for the bottom margin value) seems to make it for the 100% match.

[ruanha]

Thanks! Do you know why it works by tweaking it like that? How did you decide to do that? Or is it just trial and error?

[aarthvaen]

In most cases, margin property can be used to, let's say, stretch the elements we're working with to make them fit the targets. So what I was thinking to make your solution work was to increase div's height by 2px then use bottom margin value to stretch it exactly on the target. I assume this behaviour is or may be influenced by the properties in your body like display:flex or margin:0. But after all, it's trial and error and even the strangest approaches can do the job when you least expect it. 😄