Stipe - scroller info

by PhilQ

HTML

<div id="scroller-info">
    <div>
        <div></div>
        <h2>Topaz 12</h2>
        <h3>Jeugdcatamaran</h3>
        <br />
        <div>
            <div class="scroller-info-desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum itaque nam blanditiis eveniet enim eligendi quae adipisci? Assumenda blanditiis voluptas tempore porro quibusdam beatae deleniti quod asperiores sapiente dolorem error! Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibusdam mollitia nesciunt modi. Quo nam quasi soluta reprehenderit laudantium optio ipsam ducimus consequatur enim fuga quibus dam.
            </div>
            <div class="scroller-info-facts">
                <div class="ages">12 - 14<br /><small>jaar</small></div>
                <div class="kids">1 - 2<br /><small>personen</small></div>
                <div class="cwo">Jeugd- catamaran<br /><small>I, II of III</small></div>
            </div>
        </div>
    </div>
</div>

CSS

*, *:before, *:after {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
    background-image: url(http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg);
}

#scroller-info {
    height: 500px;
    width: 460px;
    position: absolute;
    top: 0px;
    right: 0px;
/*
    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 25% 100%);
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 25% 100%);
*/
}
#scroller-info:before {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    border-width: 0px;
    border-color: transparent;
    border-style: solid;
    border-left: 100px solid transparent;
    border-top: 500px solid #e30613;
    opacity: 0.75;
}

#scroller-info > div {
    float: left;
    display: inline-block;
    width: 100%;
    padding: 20px;
    padding-top: 35px;
}
#scroller-info > div > div:first-child {
    width: 100px;
    height: 500px;
    float: left;
    shape-margin: 10px;
    shape-outside: polygon(0 0, 100% 100%, 0% 100%) margin-box;
}
#scroller-info > div > h2 {
    color: #fff;
    font-size: 48px;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
#scroller-info > div > h3 {
    text-align: right;
    text-transform: uppercase;
    color: #009fe3;
    font-size: 18px;
    text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
#scroller-info > div > div {
    text-align: justify;
    color: #fff;
}
.scroller-info-desc {
    display: block;
    padding-top: 0px;
    line-height: 1.4;
}
.scroller-info-facts {
    width: 345px;
    position: absolute;
    bottom: 15px;
    right: 15px;
    display: inline-block;
    font-size: 20px;
    font-weight: normal;
    color: #fff;
    padding-top: 5px;
}
.scroller-info-facts > div {
    position: relative;
    float: left;
    display: inline-block;
    width: 33%;
    padding: 30px 7px 0px 8px;
    text-align: center;
    border-top: 1px solid rgba(0,0,0,...