SCSS

by vishal157

HTML

<section class="stats-section clipped-top">
    <div class="bottom-triangle">
        <div class="triangle"></div>
    </div>
    <div class="container">
        <div class="section-content">
                            
                        <div class="row">
                <div class="col-md-10">
                    <div class="row">
                                                    <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">30</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Years in Business</p>
                            </div>
                                                    <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">1330</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Projects Completed</p>
                            </div>
                                                    <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">330</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Families Supported</p>
                            </div>
                                                    <div class="col-md-6 col-xl-3 mt-4 mt-xl-0 text-left text-xl-center">
                                <h2 class="mb-0 stat-number">660</h2>
                                <p class="mb-0 stat-desc font-zilla-medium">Jobs Created</p>
                            </div>
                                            </div>
                </div>
            </div>
        </div>
    </div>
</section>

SCSS

.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%);
}