2つの背景画像をどのように角度をつけるのですか？

Question

私はCSSなどで複製する必要がある次のデザインを持っています。左/右の背景イメージは、CMSを介して編集可能である必要があります。なぜ、私はインラインbackground-imageスタイルを使用しましたか？

左の画像に金色の境界線などがある斜めの/斜めの右端があり、次に右の画像がその平行になるように角度を付ける方法を知りたいだけです。この段階では、彼らの中のコンテンツについて心配していません。

私はここでデモを持っている：http://codepen.io/ifusion/pen/KNxNxL

どのようにして、この使用してCSSをしますか？私もデモで追加されているブートストラップを使用しています

Answer 1

divを整形する方法について詳しく知りたいです。

それは単に一例であり、それはあなたがCSSでskewを使用してみてください

/* 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; 
 
\t transform:skewX(-20deg); 
 
    -ms-transform:skewX(-20deg); 
 
    -webkit-transform:skewX(-20deg); 
 
} 
 
li a { 
 
    padding: 3px 6px 3px 6px; 
 
\t color: #ffffff; 
 
\t text-decoration: none; 
 
\t width: 80px; 
 
\t 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>

Answer 2

を望んでいたもののように変更する可能性が高いです。ここで

はサンプルデモ

.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

です