How to remove space in after and before pseudo elements at the bottom?

Question

I am creating a section in which at the bottom, I have triangle shape, which i am doing with after and before elements and clip path. Below is the image of that section.

The problem is, on certain device width, it is leaving around 1px of space at the bottom and on certain width it is leaving same space from both the sides.

Here is my code:

body {
  background-color: #424963;
  padding: 0;
  margin: 0;
}
.stats-section {
  background-color: #1B2235;
  padding: 200px 0;
  position: relative;
}

.bottom-triangle {
  position: absolute;
  height: 150px;
  width: 100%;
  bottom: 0;
  left: 0;
}

.bottom-triangle .triangle {
  position: absolute;
  width: 50%;
  height: 200px;
  background-color: #ED0F0C;
  right: 0;
  bottom: 0;
  z-index: 9;
  clip-path: polygon(0 120px, 100% 0, 100% 100%, 0 100%);
}

.bottom-triangle:after,
.bottom-triangle:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 50.05%;
  background-color: #424963;
  z-index: 9;
}

.bottom-triangle:after {
  right: 0;
  clip-path: polygon(0 70px, 100% 0, 100% 100%, 0 100%);
}

.bottom-triangle:before {
  left: 0;
  clip-path: polygon(0 0, 100% 70px, 100% 100%, 0 100%);
}


    
        
            
        
        
            

                
                    
                        
                            
                                30
                                Years in Business
                            
                            
                                1330
                                Projects Completed
                            
                            
                                330
                                Families Supported
                            
                            
                                660
                                Jobs Created

I have tried few solutions and searched online, but couldn't find a a cause or solution. You can see a fine line at the bottom in the image or else below is the fiddle link where you can see the issue by resizing the browser window:

https://jsfiddle.net/vishal157/fj91n8tq/

How to achieve the same triangle with the section having background image and gradient overlay with the little shadow looming over? Like below image:

user_8620333 · Answer

I would do it differently with less of code:

body {
  background-color: #424963!important;
}
.stats-section {
  background:
   linear-gradient(to bottom right,transparent 49.8%,#ED0F0C 50%)
   bottom right/
   50% 150px  /* adjust the 150px to control the red triangle */
   no-repeat,
   #1B2235; /* you can replace the color with an image */
  padding: 100px 0 200px;
  /* adjust the 110px to control the main triangle */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 110px),50% 100%, 0 calc(100% - 110px));
}



        
            

                
                    
                        
                            
                                30
                                Years in Business
                            
                            
                                1330
                                Projects Completed
                            
                            
                                330
                                Families Supported
                            
                            
                                660
                                Jobs Created

Another idea more supported still with less of code:

body {
  background-color: #424963!important;
}

.stats-section {
  position: relative;
  z-index:0;
  padding: 100px 0 200px;
}

.stats-section::before,
.stats-section::after {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #1B2235;
}

.stats-section::before {
  left: 0;
  transform-origin: right;
  transform: skewY(8deg);
}

.stats-section::after {
  right: 0;
  transform-origin: left;
  transform: skewY(-8deg);
  background: 
    linear-gradient(to bottom right, transparent 49.8%, #ED0F0C 50%) 
    bottom right/100% 50px 
    no-repeat #1B2235;
}



  
    

      
        
          
            
              30
              Years in Business
            
            
              1330
              Projects Completed
            
            
              330
              Families Supported
            
            
              660
              Jobs Created

And with image as background:

body {
  background-color: #424963!important;
}

.stats-section {
  position: relative;
  z-index:0;
  padding: 100px 0 200px;
}

.stats-section > span {
  position: absolute;
  z-index:-1;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #1B2235;
  overflow:hidden;
}
.stats-section > span::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url(https://picsum.photos/id/1015/800/800) left/200% auto;
  transform-origin:inherit;
  transform: skewY(-8deg);
}
.stats-section > span:nth-of-type(2)::before {
  transform: skewY(8deg);
  background-position:right;
  background:
    linear-gradient(to bottom right, transparent 49.8%, #ED0F0C 50%) 
     bottom right/100% 10vw no-repeat,
    url(https://picsum.photos/id/1015/800/800) right/200% auto;
}
.stats-section > span:nth-of-type(1){
  left: 0;
  transform-origin: right;
  transform: skewY(8deg);
}

.stats-section > span:nth-of-type(2) {
  right: 0;
  transform-origin: left;
  transform: skewY(-8deg);
}



  
  
  
    

      
        
          
            
              30
              Years in Business
            
            
              1330
              Projects Completed
            
            
              330
              Families Supported
            
            
              660
              Jobs Created

user_10698741 · Answer

You can do this with only linear-gradients like below.

.stats-section {
  background-color: #1B2235;
  padding: 100px 0 200px;
  position: relative;
}

.bottom-triangle {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  
  /* you can change these variables */
  --bottom-height: 100px;
  --arrow-height: 100px;
  --red-height: 150px;
  --c1: #424963;
  --c2: #ED0F0C;
  
  height: calc(var(--bottom-height) + var(--red-height));
  background:
    linear-gradient(to top left, var(--c1) 49.5%, transparent 50% 100%) 100% calc(100% - var(--bottom-height))/50% var(--arrow-height) no-repeat,
    linear-gradient(to top left, var(--c2) 49.5%, transparent 50% 100%) 100% calc(100% - var(--bottom-height))/50% var(--red-height) no-repeat,
    linear-gradient(to top right, var(--c1) 49.5%, transparent 50% 100%) 0 calc(100% - var(--bottom-height))/50% var(--arrow-height) no-repeat,
    linear-gradient(var(--c1), var(--c1)) 0 100%/ 100% var(--bottom-height) no-repeat;
}



  
    
  
  
    

      
        
          
            
              30
              Years in Business
            
            
              1330
              Projects Completed
            
            
              330
              Families Supported
            
            
              660
              Jobs Created

How to remove space in after and before pseudo elements at the bottom?

2 Answers