Promotion Save Big Ticker Style

by Muhammad Hassaan

HTML

<div class="plan-table-banner-wrapper">
    <div class="plan-table-banner ng-scope" data-background-image="" style="background-image: url(&quot;https://cdn.lfomedia.com/uploaded_assets/b5f88de3-74e5-436f-a478-d8147800cc47.png&quot;);">
        <div class="banner-left">
            <div class="banner-cap-left">
                <div class="banner-cap-left-inner"></div>
            </div>
            <div class="banner-text">Save Big!</div>
            <div class="banner-cap-right"></div>
        </div>
        <div class="banner-right">
            <div class="banner-right-highlight"> <span><img src="https://cdn.lfomedia.com/uploaded_assets/2df19d82-ae79-454b-bc3b-51f3322c0cf3.png" alt=""></span> <span>
                <p>Installation</p>
                </span> </div>
            <div class="banner-right-highlight"> <span><img src="https://cdn.lfomedia.com/uploaded_assets/2df19d82-ae79-454b-bc3b-51f3322c0cf3.png" alt=""></span> <span>
                <p>WiFi Setup</p>
                </span> </div>
            <div class="banner-right-highlight"> <span><img src="https://cdn.lfomedia.com/uploaded_assets/2df19d82-ae79-454b-bc3b-51f3322c0cf3.png" alt=""></span> <span>
                <p>DVR service</p>
                </span> </div>
        </div>
        <div class="disclaimer-text">exclusions apply<sup>‡</sup></div>
    </div>
</div>

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
.plan-table-banner { background-color: #003057; background-image: -webkit-gradient(linear, left top, left bottom, from(#003057), to(#0077bc)); background-image: -webkit-linear-gradient(top, #003057, #0077bc); background-image: -moz-linear-gradient(top, #003057, #0077bc); background-image: -ms-linear-gradient(top, #003057, #0077bc); background-image: -o-linear-gradient(top, #003057, #0077bc); background-image: linear-gradient(top, #003057, #0077bc); background-size: cover; position: relative; padding: 10px 10px 10px 0; margin-left: 10px; color: #fff; background-image: url(https://cdn.lfomedia.com/uploaded_assets/b5f88de3-74e5-436f-a478-d8147800cc47.png); }
.plan-table-banner:after { display: table; content: ''; clear: both; }
.plan-table-banner .banner-left { width: 33%; float: left; margin-bottom: 0; max-width: none; height: 67px; position: relative; }
.banner-cap-left { position: absolute; top: -10px; left: -10px; height: calc(100% + 20px); width: 10px; overflow: hidden; }
.banner-cap-left:before { -webkit-transform: rotate(25deg); -khtml-transform: rotate(25deg); -moz-transform: rotate(25deg); -ms-transform: rotate(25deg); -o-transform: rotate(25deg); transform: rotate(25deg); content: ''; position: absolute; top: 2px; left: 2px; width: 0; height: 0; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #c93 transparent; }
.banner-cap-left:after { -webkit-transform: rotate(-25deg); -khtml-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg); content: ''; position: absolute; bottom: 2px; left: 2px; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent #c93 transparent transparent; z-index: 1; }
.banner-left .banner-cap-left .banner-cap-left-inner { -webkit-transform: translate(0, 0); -khtml-transform: translate(0, 0); -moz-transform:...