How to scale SVG with my parent div alongside content?

Question

I can't seem to figure out why my SVG isn't aligning to my content. I want the arrow to scale its height with the div container on the left. It's because my content may be 1 line or 2 lines. I'm not sure how the borders will line up either.

Please can someone help?

my Problem

HTML:

<div class="box3">
                  <div class="content">
                    <i class="bi bi-skip-end-circle" style="font-size:36px;"></i>
                    <p style="padding-left:20px">Skip content Skip content Skip content Skip content Skip content Skip content Skip content.</p>
                    
                  </div>
                  <img src="SVG/asset2.svg" class="image">
            </div>

CSS:

.box3 {
   width: 700px;
   min-height:54px;
   display:flex;


} 

.content {
  display:flex;
  align-items:center;
  padding-left: 20px;
  background: #D9F1FF;
  border-top: 1px solid #7197C9;
  border-left: 1px solid #7197C9;
  border-bottom: 1px solid #7197C9;
  font-size:15px;
  border-radius: 5px;
  font-family: Arial,Helvetica,sans-serif;

}

.image {
}

SVG:

<svg xmlns="http://www.w3.org/2000/svg" width="77" height="77" viewBox="0 0 40 40"  preserveAspectRatio="xMidYMid"><defs><style>.cls-1{fill:#d9f1fd;}.cls-2{fill:#7197c9;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><polygon class="cls-1" points="30.6 18.77 0 1.11 0 36.44 30.6 18.77"/><polygon class="cls-2" points="0 0 0 1.16 29.75 18.33 0 35.5 0 36.66 31.75 18.33 0 0"/></g></g></svg>

Answer 1

Please take a look at the svg you are using. If I draw a border around the svg element you can see you have gaps (especially too high)

svg{border:solid}

<svg xmlns="http://www.w3.org/2000/svg" width="77" height="77" viewBox="0 0 40 40" preserveAspectRatio="xMidYMid">
  <defs>
    <style>
      .cls-1 {
        fill: #d9f1fd;
      }

      .cls-2 {
        fill: #7197c9;
      }
    </style>
  </defs>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <polygon class="cls-1" points="30.6 18.77 0 1.11 0 36.44 30.6 18.77" />
      <polygon class="cls-2" points="0 0 0 1.16 29.75 18.33 0 35.5 0 36.66 31.75 18.33 0 0" />
    </g>
  </g>
</svg>

In the next example I change the viewBox attribute of the svg element so that there are no gaps:

svg{border:solid}

<svg xmlns="http://www.w3.org/2000/svg" width="77"  viewBox="0 0 31.75 36.66" preserveAspectRatio="none">
  <defs>
    <style>
      .cls-1 {
        fill: #d9f1fd;
      }

      .cls-2 {
        fill: #7197c9;
      }
    </style>
  </defs>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <polygon class="cls-1" points="30.6 18.77 0 1.11 0 36.44 30.6 18.77" />
      <polygon class="cls-2" points="0 0 0 1.16 29.75 18.33 0 35.5 0 36.66 31.75 18.33 0 0" />
    </g>
  </g>
</svg>

Also I changed preserveAspectRatio value to "none", since you want the shape to stretch as height as the content but you need the width to stay constant.

.box3 {
   width: 700px;
   min-height:54px;
   display:flex;


} 

.content {
  display:flex;
  align-items:center;
  padding-left: 20px;
  background: #D9F1FF;
  border-top: 1px solid #7197C9;
  border-left: 1px solid #7197C9;
  border-bottom: 1px solid #7197C9;
  font-size:15px;
  border-radius: 5px;
  font-family: Arial,Helvetica,sans-serif;

}

<div class="box3">
  <div class="content">
    <i class="bi bi-skip-end-circle" style="font-size:36px;"></i>
    <p style="padding-left:20px">Skip content Skip content Skip content Skip content Skip content Skip content Skip content Skip content Skip content Skip content Skip content  content.</p>

  </div>
  <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='77' viewBox='0 0 31.75 36.66' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23d9f1fd; %7D .cls-2 %7B fill: %237197c9; %7D %3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpolygon class='cls-1' points='30.6 18.77 0 1.11 0 36.44 30.6 18.77' /%3E%3Cpolygon class='cls-2' points='0 0 0 1.16 29.75 18.33 0 35.5 0 36.66 31.75 18.33 0 0' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E" class="image">
</div>

In the previous example, for clarity, the src of the image is a data:uri. You can keep it external.

Answer 2

I tried a couple if ways to solve this, but it gets a bit tricky to scale your border together with the svg's border. I think it will work better to create the entire thing as a background image, you will still have some scaling issues but it would be much smoother.

One thing to note in your current design is that your border radius is creating extra spacing, so change that to .content { border-radius: 5px 0 0 5px; }

Here is one way that might work for you - using a triangle border instead of the svg:

.box3 {
  width: 700px;
  min-height: 54px;
  display: flex;
}

.content {
  display: flex;
  align-items: center;
  padding-left: 20px;
  background: #D9F1FF;
  border-top: 1px solid #7197C9;
  border-left: 1px solid #7197C9;
  border-bottom: 1px solid #7197C9;
  font-size: 15px;
  border-radius: 5px 0 0 5px;
  font-family: Arial, Helvetica, sans-serif;
}

.tri {
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 100px;
  border-color: transparent transparent transparent #7197C9;
}

.tri:after {
  content: "";
  position: absolute;
  top: -49px;
  left: -100px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 49px 0 49px 98px;
  border-color: transparent transparent transparent #D9F1FF;
}

<div class="box3">
  <div class="content">
    <i class="bi bi-skip-end-circle" style="font-size:36px;"></i>
    <p style="padding-left:20px">Skip content Skip content Skip content Skip content Skip content Skip content Skip content Skip content Skip content Skip content Skip content content.</p>

  </div>
  <div class="tri"></div>
</div>