1

I'm working on a project where I have to make some angled divs that overlap. There's a description which angles over a relevant image. I thought I had this working right until I tested in chrome. At first I thought maybe it was a clearfix issue cause the image wasn't showing up at all, but now I'm at a loss

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

This is what I see in chrome

I am doing most of my coding in Dreamweaver. My CSS is as follows. 

.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;
}

My HTML (forgot to post this earlier)

<div class="description">
    <div class="titleLeft"> 
       <font class="whiteArticleTitle">
          Title
        </font>
     </div>
    <div class="hobbyContentLeft">
        text here <br><br> 

        second paragraph


        <br><br>    

         <a href="/">My Instagram</a>
         <a href="/" class="whiteArticleLink">Blog Posts</a>
  </div>


</div>
<div class= "image"></div>
delabj
  • 11
  • 4
  • 1
    please post your html – jtate Jan 21 '19 at 21:36
  • Added, sorry about that, I thought I had – delabj Jan 21 '19 at 21:43
  • Does the angle have to be defined in `.image` or can it also be defined somewhere else (maybe even in it's own `div`)? I could hack you a quick solution but I think the result you're getting in Chrome (and defining the angle in `.image`) is unavoidable with a current Chrome release. – Cherusker Jan 21 '19 at 22:08
  • 1
    here is more ways to achieve this better than border https://stackoverflow.com/q/30441122/8620333 – Temani Afif Jan 21 '19 at 22:20
  • Possible duplicate of [Shape with a slanted side (responsive)](https://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive) – Hugo Silva Jan 22 '19 at 03:09

0 Answers0