Adjacent divs with angled borders? [duplicate]

by

Try this 

.left, .right {
  position: relative;
  height: 100px;
  width: 200px;
  background: #000;
  float: left;
}

.left:after {
  content: '';
  line-height: 0;
  font-size: 0;
  width: 0;
  height: 0;
  border-top: 100px solid #000;
  border-bottom: 50px solid transparent;
  border-left: 0px solid transparent;
  border-right: 50px solid transparent;
  position: absolute;
  top: 0;
  right: -50px;
}

.right {
  margin-left: 60px;
  width: 100px;
}

.right:before {
  content: '';
  line-height: 0;
  font-size: 0;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 100px solid #000;
  border-left: 50px solid transparent;
  border-right: 0px solid #000;
  position: absolute;
  top: -50px;
  left: -50px;
}
<div class="left"> </div>
<div class="right"> </div>

UPDATE with images 

.left, .right {
    background: #000 url('http://lorempixel.com/300/100');
    position: relative;
    height: 100px;
    width: 250px;
    float: left;
}

.left:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 100px solid #fff;
    border-left: 30px solid transparent;
    border-right: 0 solid #fff;
    position: absolute;
    top: -50px;
    right: 0;
}

.right {
    background: #000 url('http://lorempixel.com/200/100');
    width: 150px;
}

.right:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 100px solid #fff;
    border-bottom: 50px solid transparent;
    border-left: 0px solid transparent;
    border-right: 30px solid transparent;
    position: absolute;
    top: 0;
    left: 0;
}
<div class="left"> </div>
<div class="right"> </div>

More Related Contents:

  1. How to make double border on left only with thick outside and thin inside [duplicate]
  2. How do CSS triangles work?
  3. How do you easily horizontally center a using CSS? [duplicate]
  4. Transparent text cut out of background
  5. Can I create a div with a Curved bottom?
  6. CSS Floating Divs At Variable Heights [duplicate]
  7. How to make this arrow in CSS only?
  8. Footer at bottom of page or content, whichever is lower
  9. Is there a way to make a child DIV’s width wider than the parent DIV using CSS?
  10. Is float for layout bad? What should be used in its place?
  11. Circular percent progress bar
  12. How to create equal height columns in pure CSS [duplicate]
  13. How do I right align div elements?
  14. How does this CSS produce a circle?
  15. How to draw a trapezium/trapezoid with css3?
  16. How does object-fit work with canvas element?
  17. How to make a element expand or contract to its parent container?
  18. scale HTML5 Video and break aspect ratio to fill whole site
  19. Disable zoom on a div, but allow zoom on the page (an alternate div)
  20. why is my content showing outside the div?
  21. Why use an HTML5 semantic tag instead of div? [duplicate]
  22. How to display and hide a div with CSS?
  23. Transparent hollow or cut out shape in HTML
  24. How to make responsive table [closed]
  25. Why adds extra top margin?
  26. How to create a heart shape using CSS?
  27. CSS Floating Divs with different height are aligned with space between them
  28. Make plus symbol in CSS
  29. Horizontal scroll in DIV with many small DIV’s inside (no text)
  30. Creating a droplet like border effect in css

Leave a Comment