斜角Div在Chrome中无法正确显示，但在Firefox和Edge中显示

Question

我正在做一个项目，在这个项目中我必须做一些倾斜的div重叠。有一个描述会倾斜相关图像。我以为我可以正常工作，直到我在chrome中测试为止。起初我以为这可能是一个clearfix问题，因为图像根本没有显示，但是现在我很茫然

I want this to be the result and what I see in most browsers

This is what I see in chrome

我正在Dreamweaver中进行大部分编码。我的CSS如下。

php7.x

我的HTML（忘记了发布此内容）

.description{
   width: 40%;  
   height: 100%; 
   background: #BFA8DB;
   box-sizing: border-box;

}
.image{
   width: 60%;
   height: 100%; 
   box-sizing: border-box;
   border-left: 100px solid #BFA8DB;
   border-bottom: 350px solid transparent;
   background: #000 url('images/Iceland.jpg');
   background-position: -200px  -200px; 
   overflow:hidden;
}
.titleLeft{
   position: relative;
   padding: 50px 50px 0 50px;   
   float:left;
}