1. html

                  



                  <div class="container">
      <div class="row">
          <div class="col-md-3 col-sm-6">
              <div class="counter">  
                  <div class="counter-icon"><i class="fa fa-globe"></i></div>
                  <h3>Web Designing</h3>
                  <span class="counter-value">373</span>
              </div>
          </div>
          <div class="col-md-3 col-sm-6">
              <div class="counter blue">
                  <div class="counter-icon"><i class="fa fa-rocket"></i></div>
                  <h3>Web Development</h3>
                  <span class="counter-value">352</span>
              </div>
          </div>
      </div>
  </div>



                

2. css

                
.counter{
    color: #f14159;
    background: #f14159;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    width: 200px;
    padding: 0 15px 33px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}  
.counter:before{
    content: "";
    background:#fff;
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: -1;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}
.counter .counter-icon{
    color: #fff;
    background: inherit;
    font-size: 30px;
    padding: 10px;
    margin: 0 0 28px;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
}
.counter h3{
    color: #333;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0 0 12px;
}
.counter h3:after{
    content: '';
    background-color: #f14159;
    height: 2px;
    width: 50%;
    margin: 5px auto;
    display: block;
    clear: both;
}
.counter .counter-value{
    font-size: 30px;
    font-weight: 600;
    display: block;
}
.counter.green{
    color: #079b67;
    background-color: #079b67;
}
.counter.green h3:after{ background-color: #079b67; }
.counter.blue{
    color: #01A7B9;
    background-color: #01A7B9;
}
.counter.blue h3:after{ background-color: #01A7B9; }
.counter.pink{
    color: #d84e80;
    background-color: #d84e80;
}
.counter.pink h3:after{ background-color: #d84e80; }
@media  screen and (max-width:990px){
    .counter{ margin-bottom: 40px; }
}  

3. script

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script>
$(document).ready(function(){
    $('.counter-value').each(function(){
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        },{
            duration: 3500,
            easing: 'swing',
            step: function (now){
                $(this).text(Math.ceil(now));
            }
        });
    });
});
</script>