-2

I'm looking to create 4 different shapes with content areas that will work responsively. Heres an example image - non-symmetrical shapes

Is it possible to create 4 div containers like this without the use of svg? I understand you can create a triangle shape inside the container and position it absolute top right but then the following shape (float right) would need a higher z-index to appear ontop.

It all just sounds messy, could anyone advise?

archvist
  • 712
  • 2
  • 18
  • 41
  • 1
    @SamXronn: This should guide you in the right direction - http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive. – Harry Feb 20 '17 at 14:44

1 Answers1

4

There are various ways to achieve this effect.

One approach is:

  • use transform: skew to change the angle of the right-hand divs
  • use relative positioning to slide the right-hand divs to the left, so they overlap the left-hand divs
  • use ::after pseudo-elements to hide the right-hand side of the right-hand divs

Working Example:

body {
width: 200vw;
overflow-x: hidden;
}

div {
float: left;
width: 400px;
height: 90px;
border-left: 3px solid rgb(255,255,255);
border-bottom: 3px solid rgb(255,255,255);
}

div:nth-of-type(3) {
clear: left;
}

div:nth-of-type(even) {
position: relative;
transform:skew(315deg);
}

div:nth-of-type(even)::after {
content: '';
display:block;
position: absolute;
top:0;
height:90px;
background-color:rgb(255,255,255);
transform:skew(-315deg);
}

div:nth-of-type(1) {
background-color:rgb(149,117,117);
}

div:nth-of-type(2) {
left: -67px;
background-color:rgb(117,149,117);
}

div:nth-of-type(3) {
background-color:rgb(117,133,149);
}

div:nth-of-type(4) {
left: -160px;
background-color:rgb(149,117,149);
}

div:nth-of-type(2)::after {
width:228px;
right:-60px;
}

div:nth-of-type(4)::after {
width:150px;
right:-75px;
}

div p {
height: 90px;
margin: 0;
padding: 0 24px;
line-height: 90px;
font-size: 33px;
color: rgb(255,255,255);
}

div:nth-of-type(even) p {
transform: skew(-315deg);
}
<div><p>one</p></div>
<div><p>two</p></div>
<div><p>three</p></div>
<div><p>four</p></div>
Rounin
  • 27,134
  • 9
  • 83
  • 108
  • 1
    Hi thanks for this, it's a really good answer would it be possible to make these blocks full width I understand how they work now with a fixed width. However could they be 50% each for example. – archvist Feb 21 '17 at 09:24
  • Yes, with a bit of juggling it ought to be possible to make this approach work, replacing all absolute units with relative units such as `%` or `vw`. – Rounin Feb 21 '17 at 16:01