1

I am a beginner and I am trying to make a webpage. I am using SVG on that webpage. But I am getting a bottom line/padding after the SVG. Here I am giving an image below:

enter image description here

I don't want the gradient color line after the SVG.

My Code:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.one {
  background: linear-gradient(
    60deg,
    rgba(84, 58, 183, 1) 0%,
    rgba(0, 172, 193, 1) 100%
  );
}
<div class="one">
  <div class="text">
    <h1>Demo Text</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam autem ipsa aspernatur? Commodi, aut quae soluta eum aliquid adipisci eos natus consequatur provident incidunt fugit mollitia eligendi maxime, porro a cum. Delectus rerum amet doloribus labore iure, quam mollitia voluptatum sit optio minus vero dignissimos minima, necessitatibus obcaecati at ipsa.</p>
  </div>
  <svg id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 300" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(255, 255, 255, 1)" offset="0%"></stop><stop stop-color="rgba(255, 255, 255, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,210L80,175C160,140,320,70,480,70C640,70,800,140,960,160C1120,180,1280,150,1440,115C1600,80,1760,40,1920,45C2080,50,2240,100,2400,140C2560,180,2720,210,2880,225C3040,240,3200,240,3360,210C3520,180,3680,120,3840,80C4000,40,4160,20,4320,25C4480,30,4640,60,4800,80C4960,100,5120,110,5280,105C5440,100,5600,80,5760,105C5920,130,6080,200,6240,205C6400,210,6560,150,6720,130C6880,110,7040,130,7200,140C7360,150,7520,150,7680,130C7840,110,8000,70,8160,80C8320,90,8480,150,8640,185C8800,220,8960,230,9120,215C9280,200,9440,160,9600,125C9760,90,9920,60,10080,75C10240,90,10400,150,10560,165C10720,180,10880,150,11040,125C11200,100,11360,80,11440,70L11520,60L11520,300L11440,300C11360,300,11200,300,11040,300C10880,300,10720,300,10560,300C10400,300,10240,300,10080,300C9920,300,9760,300,9600,300C9440,300,9280,300,9120,300C8960,300,8800,300,8640,300C8480,300,8320,300,8160,300C8000,300,7840,300,7680,300C7520,300,7360,300,7200,300C7040,300,6880,300,6720,300C6560,300,6400,300,6240,300C6080,300,5920,300,5760,300C5600,300,5440,300,5280,300C5120,300,4960,300,4800,300C4640,300,4480,300,4320,300C4160,300,4000,300,3840,300C3680,300,3520,300,3360,300C3200,300,3040,300,2880,300C2720,300,2560,300,2400,300C2240,300,2080,300,1920,300C1760,300,1600,300,1440,300C1280,300,1120,300,960,300C800,300,640,300,480,300C320,300,160,300,80,300L0,300Z"></path></svg>
</div>

<div class="two">
  <h1>Demo Text</h1>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, hic labore. Dignissimos labore explicabo, saepe beatae accusamus quos iste dolore repellat blanditiis optio assumenda sequi fugiat cum inventore culpa at voluptatem quisquam? Aperiam voluptates deleniti, iusto aspernatur nulla quam obcaecati consequuntur quis cumque sapiente veritatis accusantium quidem possimus dicta blanditiis.</p>
</div>

How can I remove the bottom line?

Satyajit Roy
  • 517
  • 1
  • 5
  • 18

1 Answers1

4

Set the svg element to display block. It defaults to inline-block. inline-block reserves space for descenders but you don't want that.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.one {
  background: linear-gradient(
    60deg,
    rgba(84, 58, 183, 1) 0%,
    rgba(0, 172, 193, 1) 100%
  );
}

svg {
  display : block;
}
<div class="one">
  <div class="text">
    <h1>Demo Text</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Numquam autem ipsa aspernatur? Commodi, aut quae soluta eum aliquid adipisci eos natus consequatur provident incidunt fugit mollitia eligendi maxime, porro a cum. Delectus rerum amet doloribus labore iure, quam mollitia voluptatum sit optio minus vero dignissimos minima, necessitatibus obcaecati at ipsa.</p>
  </div>
  <svg id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 300" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(255, 255, 255, 1)" offset="0%"></stop><stop stop-color="rgba(255, 255, 255, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,210L80,175C160,140,320,70,480,70C640,70,800,140,960,160C1120,180,1280,150,1440,115C1600,80,1760,40,1920,45C2080,50,2240,100,2400,140C2560,180,2720,210,2880,225C3040,240,3200,240,3360,210C3520,180,3680,120,3840,80C4000,40,4160,20,4320,25C4480,30,4640,60,4800,80C4960,100,5120,110,5280,105C5440,100,5600,80,5760,105C5920,130,6080,200,6240,205C6400,210,6560,150,6720,130C6880,110,7040,130,7200,140C7360,150,7520,150,7680,130C7840,110,8000,70,8160,80C8320,90,8480,150,8640,185C8800,220,8960,230,9120,215C9280,200,9440,160,9600,125C9760,90,9920,60,10080,75C10240,90,10400,150,10560,165C10720,180,10880,150,11040,125C11200,100,11360,80,11440,70L11520,60L11520,300L11440,300C11360,300,11200,300,11040,300C10880,300,10720,300,10560,300C10400,300,10240,300,10080,300C9920,300,9760,300,9600,300C9440,300,9280,300,9120,300C8960,300,8800,300,8640,300C8480,300,8320,300,8160,300C8000,300,7840,300,7680,300C7520,300,7360,300,7200,300C7040,300,6880,300,6720,300C6560,300,6400,300,6240,300C6080,300,5920,300,5760,300C5600,300,5440,300,5280,300C5120,300,4960,300,4800,300C4640,300,4480,300,4320,300C4160,300,4000,300,3840,300C3680,300,3520,300,3360,300C3200,300,3040,300,2880,300C2720,300,2560,300,2400,300C2240,300,2080,300,1920,300C1760,300,1600,300,1440,300C1280,300,1120,300,960,300C800,300,640,300,480,300C320,300,160,300,80,300L0,300Z"></path></svg>
</div>

<div class="two">
  <h1>Demo Text</h1>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque, hic labore. Dignissimos labore explicabo, saepe beatae accusamus quos iste dolore repellat blanditiis optio assumenda sequi fugiat cum inventore culpa at voluptatem quisquam? Aperiam voluptates deleniti, iusto aspernatur nulla quam obcaecati consequuntur quis cumque sapiente veritatis accusantium quidem possimus dicta blanditiis.</p>
</div>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242