CODEWITHSUNDEEP
htmlcsssvgcross-browser
Borja
Borja

Reputation: 3559

Svg line strange effect on bottom-border

Someone say me if a svg line makes a strange effect on border-bottom ?

enter image description here

I have this html:

 <div id="father">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: rotate(360deg);background: #34495e;">
    <path fill-opacity="1" d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,138.7C840,171,960,245,1080,245.3C1200,245,1320,171,1380,133.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" fill="#e4f1fe"></path>
  </svg>
  <div id="subsling"></div>
  <!-- This line appears and disappears depending on the size of the browser window. -->
  </div>

Upvotes: 3

Views: 902

Answers (1)

enxaneta
enxaneta

Reputation: 33064

As I've commented: add svg{display:block;} to the svg

svg{width:100%;display:block;}
#subsling{background: #e4f1fe;padding:1em;}
<div id="father">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" style="transform: rotate(360deg);background: #34495e;">
          <path fill-opacity="1" d="M0,224L60,208C120,192,240,160,360,138.7C480,117,600,107,720,138.7C840,171,960,245,1080,245.3C1200,245,1320,171,1380,133.3L1440,96L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z" fill="#e4f1fe"></path>
</svg>  
 <div id="subsling">
   <p>wertyui wertyuio ertyufghjklñ  ertyuiop eghjkl </p>
 </div>
</div>

Upvotes: 2

Related Questions