I have a home page of the site in which the self-printing text is reflected, plus a picture of the background background. And I inserted a SVG triangle there.

Well, below the triangle SVG, a part of the background is shown. How can anyone remove this?

 .svg-color { z-index: 8; position: relative; border-width: 0; border-color: transparent; /* more than in bg-image */ background-color: transparent; outline: none; } .browser_width { position: relative; z-index: 8; } #triangle-1 path { position: relative; z-index: 8; fill: #f5f5f5; stroke: #f5f5f5; } .bg-image { width: 100%; height: 100%; background-image: url("http://berlin.aftermotion.com/berlin/images/home-2-u233-fr.jpg"); background-repeat: no-repeat; background-position: center center; padding-bottom: 0; z-index: 5; background-size: cover; background-color: #fff; opacity: 1; } 
  <div class="container-fluid"> <div class="row"> <div class="bg-image" style="color:#fff;"> TEST <h1 id="typed-strings" style="color:#fff;"> We are <span class="element">Design</span> </h1> <div class="browser_width" style="height: 154px;"> <div class="svg-color"> <svg id="triangle-1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="150" viewBox="0 0 100 150" preserveAspectRatio="none"> <path d="M0,5 L30,130 100,5 100,150 0,150Z"></path> </svg> </div> </div> </div> </div> </div>

    1 answer 1

    HTML code comments

     .svg-color { z-index: 8; position: relative; border-width: 0; border-color: transparent; /* more than in bg-image */ background-color: transparent; outline: none; } .browser_width { position: relative; z-index: 8; } #triangle-1 path { position: relative; z-index: 8; fill: #f5f5f5; stroke: #f5f5f5; } .bg-image { width: 100%; height: 100%; background-image: url("http://berlin.aftermotion.com/berlin/images/home-2-u233-fr.jpg"); background-repeat: no-repeat; background-position: center center; padding-bottom: 0; z-index: 5; background-size: cover; background-color: #fff; opacity: 1; } 
     <div class="container-fluid"> <div class="row"> <div class="bg-image" style="color:#fff;"> TEST <h1 id="typed-strings" style="color:#fff;"> We are <span class="element">Design</span> </h1> <!-- изменил стороку ниже, надо было поменять высоту блока было style="height: 154px;" стало style="height: 150px;" --> <div class="browser_width" style="height: 150px;"> <div class="svg-color"> <svg id="triangle-1" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="150" viewBox="0 0 100 150" preserveAspectRatio="none"> <path d="M0,5 L30,130 100,5 100,150 0,150Z"/> </svg> </div> </div> </div> </div> </div>

    • and the decision was so easy, I didn’t even pay attention . Thank you - Demon __ ANT
    • You ... - Air