html - Slice two boxes HTML/CSS

Question

can be done a slice between two divs in CSS like the following photo ?

I tried to google it but didn't found anything usefull for my problem

Thanks !

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 形状的工作原理！
祝你好运 ！