Html 倾斜和带边框Div中的背景图像

我目前正在尝试各种各样的、看起来更“独特”的网站设计。我最新的实验是文本旁边的一个倾斜的方框——这很难用语言来解释，因此我提供了一张经过Photoshop处理的图像以及一个JSFIDLE，介绍了我迄今为止所做的工作：

它应该是什么样子的：

它目前的样子：

---

我在这条路上走对了吗？或者我应该如何最好地接近这种设计？我发现了许多非常相似的问题，但它们似乎都不适用于这种特殊的设计选择。

并不是说要阻止你做任何事情，但最简单的方法就是使用图像，然后将其定位为背景图像是的，将其定位为背景，然后在悬停时以div滑动？要有创意。像这样的图片通常最好是静态的。是的，这绝对是最简单的方法，只需将图片创建为一张已经裁剪过的图片，并剪下倾斜的白色部分——如果没有其他合适的方法，这可能就是我要做的。出于各种原因（响应迅速的网站、无需先编辑图像即可轻松切换图像、更简洁的设计），我仍然希望探索其他选项，无论是不是更难的路线。不过，非常感谢您确认了雅各布和哥斯堡这条似乎是最容易走的路线！

.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);
        }