定製的div右箭頭形狀

Question

請我需要我幫忙如何響應使用引導

HTML代碼會顯示如下

<div class="wrapper"> 
    <div class="container"> 
    <div class="special"> 
     <div id="counter">     
     <div id="shading"></div> 
     </div> 
    </div> 
    </div> 

請在下面實施something like this是上述HTML代碼，CSS文件

.special 
{ 
    position: relative; 
    width: 840px; 
    height: 247px; 
    background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/special_offer_bg.png'); 
    background-position: -10px 74px; 
    background-repeat: no-repeat; 
} 
#counter 
{ 
    position: absolute; 
    top: 135px; 
    left: 279px; 
    z-index: 4000; 
} 
.digit-separator 
{ 
    position: relative; 
    float: left; 
    width: 17px; 
    height: 44px; 
    overflow: hidden; 
    background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/digit_separator.png'); 
    background-repeat: no-repeat; 
    background-position: 0px 0px; 
} 
.digit 
{ 
    background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/digits.png'); 
} 
#shading 
{ 
    background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/sprites.png'); 
    background-position: 0px -396px; 
    background-repeat: repeat-x; 
    float: left; 
    height: 44px; 
    position: absolute; 
    width: 291px; 
    z-index: 4100; 
    top: 0; 
    left: 0; 
} 

請這是上面的html代碼

JavaScript代碼

function C3Counter(id, opt) { 

      this.options = { 
       stepTime: 60, // not used 
       format: "dd:hh:mm:ss", // not used 
       startTime: "01:04:40:59", 
       digitImages: 1, 
       digitWidth: 30, 
       digitHeight: 44, 
       digitSlide : true, 
       digitSlideTime : 200, 
       digitImageHeight : 484, 
       digitAnimationHeight : 44, 
       timerEnd: function(){}, 
       image: "digits.png", 
       updateInterval : 1000 

      }; 



      var s; 

      if (typeof opt != "undefined") { 
       for (s in this.options) { 
        if (typeof opt[s] != "undefined") { 
         this.options[s] = opt[s]; 
        } 
       } 
      } 


      if (String(options.startTime).indexOf(":") == -1) { 
       options.tempStartTime = options.startTime; 
      } else { 
       //TODO - does not convert time with : to seconds to count 
       var td = new Date(options.startTime); 
      } 


      this.pad2 = function(number) { 
       return (number < 10 ? '0' : '') + number; 
      } 



      var timer = setInterval("this.updateCounter()", options.updateInterval); 
      var startTime = new Date().getTime(); 
      var secNo = 0; 
      var timerSingle = new Array(); 
      var dc = 0; 
      var digits = new Array(); 
      var d = new Date(); 
      var lastTime = d.getTime(); 


      this.calculateTime = function() { 
       var tempTime = options.tempStartTime; 
       if (String(options.tempStartTime).indexOf(":") == -1) { 
        var seconds=Math.round(options.tempStartTime % 60); 
        options.tempStartTime=Math.floor(options.tempStartTime/60); 
        var minutes=Math.round(options.tempStartTime % 60); 
        options.tempStartTime=Math.floor(options.tempStartTime/60); 
        var hours=Math.round(options.tempStartTime % 24); 
        options.tempStartTime=Math.floor(options.tempStartTime/24); 
        var days=Math.round(options.tempStartTime); 
        options.timeStr = this.pad2(days)+this.pad2(hours)+this.pad2(minutes)+this.pad2(seconds); 

       } 

       var currTime = new Date().getTime(); 
       var diff = currTime - startTime; 

       options.tempStartTime = options.startTime - Math.round(diff/1000); 
      } 


      this.calculateTime(); 


      for (dc=0; dc<8; dc++) { 
       digits[dc] = { digit: this.options.timeStr.charAt(dc)}; 


       $("#"+id).append("<div id='digit"+dc+"' style='position:relative;float:left;width:"+this.options.digitWidth+"px;height:"+this.options.digitHeight+"px;overflow:hidden;'><div class='digit' id='digit-bg"+dc+"' style='position:absolute; top:-"+digits[dc].digit*this.options.digitAnimationHeight+"px; width:"+this.options.digitWidth+"px; height:"+this.options.digitImageHeight+"px; '></div></div>"); 


       if (dc % 2 == 1 && dc < 6) { 
        $("#"+id).append("<div class='digit-separator' style='float:left;'></div>"); 
       } 
      } 

      $("#"+id).append("<div style='clear:both'></div>"); 

      this.animateDigits = function() { 
       for (var dc=0; dc<8; dc++) { 
        digits[dc].digitNext = Number(this.options.timeStr.charAt(dc)); 
        digits[dc].digitNext = (digits[dc].digitNext + 10)%10; 

        var no = dc; 

        if (digits[no].digit == 0) $("#digit-bg"+no).css("top", -this.options.digitImageHeight+this.options.digitHeight + "px"); 
        if (digits[no].digit != digits[no].digitNext) { 
         $("#digit-bg"+no).animate({ "top" : -digits[no].digitNext*options.digitHeight+"px"}, options.digitSlideTime); 
         digits[no].digit = digits[no].digitNext; 
        } 

       } 

       var end = this.checkEnd(); 
      } 



      this.checkEnd = function() { 
       for (var i = 0; i < digits.length; i++) { 
        if (digits[i].digit != 0) { 
         return false; 
        } 
       } 
       clearInterval(timer); 
       this.options.timerEnd(); 
       return true; 
      } 

      this.updateCounter = function() { 
       d = new Date(); 

       if ((d.getTime() - lastTime) < (options.updateInterval - 50)) { 
        return; 
       } 
       lastTime = d.getTime(); 

       this.calculateTime(); 
       this.animateDigits(); 
      } 

     } 
C3Counter("counter", { startTime :16100 }); 

Answer 1

注*你需要使用引導v3.3.4或更高版本和jQuery V2.1.3或更高

注*這並不像你鏈接到確切的例子。它不可能通過默認的boostrap庫來實現。

HTML：

<div class="wrapper"> 
    <div class="special"> 
     <span id="clock"></span> 
    </div> 
</div> 

JS：

$('#clock').countdown('2020/10/10', function(event) { 
    $(this).html(event.strftime('%D days %H:%M:%S')); 
}); 

CSS：

.wrapper 
{ 
    width: 100%; 
    height: auto; 
    background-color: #dc403b; 
} 
.special 
{ 
    width:100%; 
    background-image: url('https://www.jqueryscript.net/demo/Colorful-Countdown-Timer/images/special_offer_bg.png'); 
    background-position: cover; 
    background-repeat: no-repeat; 
    text-align: center; 
    padding: 50px 0; 
    font-size: 18px; 
}