html - 2 つのボックスをスライスする HTML/CSS

Question

次の写真のように、CSS で 2 つの div 間のスライスを実行できますか?

私はそれをグーグルで検索しようとしましたが、私の問題に役立つものは何も見つかりませんでした

ありがとう ！

Answer 1

で行うことをお勧めしますimage。
しかし、css を使いたい場合は、ここに例を示します。

CSS

.parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg);   
-moz-transform: skew(20deg); -o-transform: skew(20deg); background: red;   
float:left;margin-left:18px;margin-right:8px;}
.parallelogram2 { width: 150px; height: 100px; -webkit-transform: skew(20deg);   
-moz-transform: skew(20deg); -o-transform: skew(20deg); background: Black;float:left; }

html

<div class="parallelogram"></div>
<div class="parallelogram2"></div>

フィドルの例！

また、css シェイプがどのように機能するかをこことここで確認して学ぶことができます。
幸運を ！