How to scale SVG with my parent div alongside content?-CodePudding

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 >
                  <div >
                    <i  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" >
            </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  points="30.6 18.77 0 1.11 0 36.44 30.6 18.77"/><polygon  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>

CodePudding user response：

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  points="30.6 18.77 0 1.11 0 36.44 30.6 18.77" />
      <polygon  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  points="30.6 18.77 0 1.11 0 36.44 30.6 18.77" />
      <polygon  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 >
  <div >
    <i  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," >
</div>

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

CodePudding user response：

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:

<div >
    <div >
        <i  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 ></div>
</div>

<style>
    .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;
    }
</style>