html – Move the element to the bottom of its container


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



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here