倾斜和镶边Div的背景图像

Question

我目前正在尝试各种更具“独特”外观的网站设计。我的最新实验是一个文本旁边的倾斜框 - 这很难用文字解释，所以我提供了一个photoshopped图像以及一个jsFiddle我到目前为止所做的事情：

它应该是什么样的：

目前的情况：Jsfiddle

.row {
    overflow: hidden;
    clear: both;
    border-top: 1px blue solid;
    border-bottom: 1px blue solid;
}
    .text {
        float: left;
        width: 70%;
        height: 590px;
        padding: 0px 10px;
    position: relative;
    box-sizing: border-box;
    }
    .slanted {
        float: right;
        width: 30%;
        height: 590px;
        border-left: 10px blue solid;
    transform: skewX(-25deg);
    -ms-transform: skewX(-25deg);
    -webkit-transform: skewX(-25deg);
    box-sizing: border-box;
    overflow: hidden;
    }
        .picture {
        width: 100%;
        height: 100%;
            background-image: url("http://www.theheritagehotel.com/upload/sequencer_images/gym-2.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transform:skewX(25deg);
            -ms-transform:skewX(25deg);
            -webkit-transform:skewX(25deg);
        }

我在这里的正确道路上，或者我应该如何最好地接近这种设计？我发现了许多非常类似的问题，但它们似乎都不适合这种特殊的设计选择。