Collapse content around a scale

HTML

Scale:
<div id=slider></div>
<div id=outer>
    <div id=inner>text</div>
</div>

CSS

#slider {
    display: inline-block;
    width: 200px;
    height: 16px;
}
#outer {
    margin-top: 10px;
    background-color: blue;
    padding: 0;
    border: 2px dotted #0ff;
    transform: skew(-10deg);
    
}
#inner {
    background-color: red;
    width: 600px;
    height: 400px;
    border: 4px dashed #ff0;
    font-size: 32px;
    color: #fff;
    -webkit-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    transform: skew(10deg);
    width:150%;
    
}