如何并排调整2个背景图像？

Question

我有以下设计需要通过css等进行复制。左/右背景图像需要通过CMS进行编辑，因此我使用了内联background-image样式。

我只是想知道如何使左图像有一个带有金色边框等的倾斜/倾斜的右边缘，然后如何使右图像成角度使其平行。在这个阶段不要担心他们内心的内容。

我在这里有一个演示：http://codepen.io/ifusion/pen/KNxNxL

如何使用CSS做到这一点？我也在使用bootstrap（已在演示中添加）

Answer 1

尝试在css中使用skew。

以下是示例演示

.container{
    overflow:hidden;
}
.image_wrap {
    width: 150px;
    height: 100px;
    margin: 0 0 0 -20px;
    -webkit-transform: skew(20deg);
       -moz-transform: skew(20deg);
         -o-transform: skew(20deg);
    background: red;
    overflow:hidden;
    position:relative; border-right:4px solid red
}
.image{
    background: url(http://placekitten.com/301/301);
    position:absolute;
    top:-30px;
    left:-30px;
    right:-30px;
    bottom:-30px;
        -webkit-transform: skew(-20deg);
       -moz-transform: skew(-20deg);
         -o-transform: skew(-20deg);

         border-right:4px solid red
}

<强> Demo

Answer 2

你只需要谷歌更多关于塑造一个div。

它只是一个例子，很有可能像你想要的那样改变

/* reset */
ul, li, a {
    margin: 0; padding: 0;
}
/* nav stuff */
ul, li, a {
    display: inline-block;
    text-align: center;
}
/* appearance styling */
ul {
    /* hacks to make one side slant only */
    overflow: hidden;
    background: linear-gradient(to right, red, white, white, red);
}
li {
    background-color: red;
	 transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    -webkit-transform:skewX(-20deg);
}
li a {
    padding: 3px 6px 3px 6px;
	color: #ffffff;
	text-decoration: none;
	width: 80px;
	 transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    -webkit-transform:skewX(20deg);
}

<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>
<br>
<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Three</a></li>
</ul>
<br>
<ul>
    <li><a href="#">One</a></li>
</ul>