Move the <path> element to the bottom of its container-CodePudding

I'm trying to move an svg to be flush with the bottom of my header background like this (this is from my Figma design) but so far I'm unable to cover this bottom portion of the background with the svg.

The div containing the svg is at the very bottom of it's container so its just the path element that needs to be moved

So far, I've tried setting formatting to the svg using div.formatSvg > svg { margin-top: auto; } and I understand that I can set the position of the svg to relative and move it in place with top: Npx; but that causes the svg to overlap the sidebar.

My last idea is to edit the svg itself because, perhaps, there is extra space at the bottom that causes this issue but I'm doubtful.

Relevant HTML

      <div class="headerBg">
        <h1 class="headerText">Lorem Ipsum</h1>
        <div class="formatSvg">
          <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
            <path d="M892.25 114.72L0 0 0 120 1200 120 1200 0 892.25 114.72z" class="shape-fill" fill="#1E1E24"
              fill-opacity="1"></path>
          </svg>
        </div>
      </div>

Relevant CSS

main {
    margin-left: 5rem;
    padding: 1rem;
    padding: 0;
    margin: 0;
}

.headerBg {
    background: linear-gradient(45deg, #d62941, #dd412f);
    height: 30rem;
    display: flex;
    flex-direction: column;
}

.formatSvg {
    margin-top: auto;
}

CodePudding user response：

SVGs are by default display: inline-block. Just like <img>. So, like other images, they sit on the baseline of text. Therefore, the gap you are seeing is the space that the browser is reserving for descenders.

The fix is to change the SVG to display: block.

I also added a justify-content: space-between; to headerBg to force the <h1> to the top, and formatSvg to the bottom. of your 30em height div. You may not need this bit in your final page.

.headerBg {
    background: linear-gradient(45deg, #d62941, #dd412f);
    height: 30rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.formatSvg svg {
    display: block;
}

<div class="headerBg">
  <h1 class="headerText">Lorem Ipsum</h1>
  <div class="formatSvg">
    <svg data-name="Layer 1" viewBox="0 0 1200 120" preserveAspectRatio="none">
      <path d="M892.25 114.72L0 0 0 120 1200 120 1200 0 892.25 114.72z" class="shape-fill" fill="#1E1E24"
        fill-opacity="1"></path>
    </svg>
  </div>
</div>

CodePudding user response：

Less code more control:

.headerBg {
  background: linear-gradient(45deg, #d62941, #dd412f);
  height: 30em;
  display: flex;
  flex-direction: column;
}

svg {
  margin-top: auto;
}

<header>
  <h1 class="headerText">Lorem Ipsum</h1>
  <svg viewBox="0 0 1200 120">
    <path d="M892.25 114.72L0 0 0 120 1200 120 1200 0 892.25 114.72z" fill="#1E1E24"></path>
  </svg>
</header>