Responsive CSS only ribbon

by Tessy Thomas

HTML

<div>
    <h1 class=ribbon>
        <i><u>Hi There</u></i>
    </h1>
</div>
<input type=range value=500 min=200 max=900 step=100>

CSS

div {
    width: 500px;
    height: 200px;
    background-color: #ded8c5;
    margin: 0 auto;
    padding: 20px 0px;
    -webkit-transition: .2s;
       -moz-transition: .2s;
        -ms-transition: .2s;
         -o-transition: .2s;
            transition: .2s;
}

input {
    display: block;
    width: 130px;
    margin: 20px auto;
}

/* Ribbon */
.ribbon {
    position: relative;
    width: 100%;
    margin: 0;
}

.ribbon:before,
.ribbon i:before {
    content: '';
    position: absolute;
    bottom: -23px;
    border: 24px solid #c45045;
}

.ribbon:before {
    left: -54px;
    border-left-color: transparent;
    -webkit-transform: rotate(-16deg);
       -moz-transform: rotate(-16deg);
        -ms-transform: rotate(-16deg);
         -o-transform: rotate(-16deg);
            transform: rotate(-16deg);
}
.oldie .ribbon:before {
    left: -48px;
}

.ribbon i:before {
    right: -54px;
    border-right-color: transparent;
    -webkit-transform: rotate(16deg);
       -moz-transform: rotate(16deg);
        -ms-transform: rotate(16deg);
         -o-transform: rotate(16deg);
            transform: rotate(16deg);
    z-index: -1;
}
.oldie .ribbon i:before {
    right: -48px;
}

.ribbon i:after,
.ribbon u:after {
    content: '';
    position: absolute;
    border-style: solid;
    bottom: -16px;
    z-index: 0;
}

.ribbon i:after {
    right: -16px;
    border-color: transparent transparent transparent #a33d33;
    border-width: 0 0 16px 16px;
}

.ribbon u:after {
    left: 0;
    border-color: transparent #a33d33 transparent transparent;
    border-width: 0 16px 16px 0;
}

.ribbon u {
    display: block;
    position: relative;
    width: 100%;
    left: -16px;
    padding: 0 16px 16px;
    background: #d0726a;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d0726a), to(#c7574d));
    background-image: -webkit-linear-gradient(#d0726a, #c7574d);
    background-image:    -moz-linear-gradient(#d0726a, #c7574d);
    background-image:    ...

JavaScript

document.querySelector('input').addEventListener('change', function() {
    this.previousElementSibling.style.width = this.value + 'px'
})