Make Three Adjacent Slanted Divs

I'm working on a webpage for my project and I need three slanted divs next to each other. I found these two divs on codepen, but there are only two and I´d like to make one more d

Solution 1:

You can also use display:flex. So you can set any width you want for the left and the right without worring about width of the center.

And I think it's more modern to use flex than float.

/* build the rectangles */
container
{
  display:flex;
}

.rr-left,
.rr-right {
  position: relative;
  height: 200px;
  background: #2c3e50;
}

.rr-left {
  z-index: 8;
  width: 33%;
}

.rr-right {
  z-index: 11;
  width: 33%;
}

.rr-mid
{
  flex:1;
  background-color:green;
  position:relative;
  z-index:10;
}

.rr-mid:before
{

  left: -100px;
border-right: 100px solid green;
border-top: 200px solid rgba(0, 0, 0, 0);
}
/* slanted edges using pseudo-elements */.rr-left:after,
.rr-right:before,
.rr-mid:before{
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.rr-left:after {
  right: 0;
  border-left: 100px solid #2c3e50;
  /* razorblade color */border-bottom: 200px solid #FFFFFF;
  /* page background color */
}

.rr-right:before {
  left: -100px;
  border-right: 100px solid #2c3e50;
  /* razorblade color */border-top: 200px solid rgba(0, 0, 0, 0);
  /* transparent */
}


/* hover styles */.rr-left:hover,
.rr-right:hover {
  background: #34495e;
}

.rr-left:hover:after {
  border-left-color: #34495e;
}

.rr-right:hover:before {
  border-right-color: #34495e;
}


/* text positioning & styles */.rr-text {
  margin-top: 5%;
  margin-left: 10%;
  width: 80%;
  text-align: left;
  font-family: Arial;
  color: #FFFFFF;
}

.rr-texth3 {
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
}

.rr-textp {
  font-size: 13px;
}

<container><divclass="rr-left"><divclass="rr-text"><h3>rr-left div</h3></div></div><divclass="rr-mid"><divclass="rr-text"><h3>rr-mid</h3></div></div><divclass="rr-right"><divclass="rr-text"><h3>rr-right div</h3></div></div></container>

And with this method, if you don't say the width for left and right, they will take just the width for text.

Try to run the snippet in full page to see the difference.

/* build the rectangles */
container
{
  display:flex;
}

.rr-left,
.rr-right {
  position: relative;
  height: 200px;
  background: #2c3e50;
}

.rr-left {
  z-index: 8;
}

.rr-right {
  z-index: 11;
}

.rr-mid
{
  flex:1;
  background-color:green;
  position:relative;
  z-index:10;
}

.rr-mid:before
{

  left: -100px;
border-right: 100px solid green;
border-top: 200px solid rgba(0, 0, 0, 0);
}
/* slanted edges using pseudo-elements */.rr-left:after,
.rr-right:before,
.rr-mid:before{
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  z-index:-1;
}

.rr-left:after {
  right: 0;
  border-left: 100px solid #2c3e50;
  /* razorblade color */border-bottom: 200px solid #FFFFFF;
  /* page background color */
}

.rr-right:before {
  left: -100px;
  border-right: 100px solid #2c3e50;
  /* razorblade color */border-top: 200px solid rgba(0, 0, 0, 0);
  /* transparent */
}


/* hover styles */.rr-left:hover,
.rr-right:hover {
  background: #34495e;
}

.rr-left:hover:after {
  border-left-color: #34495e;
}

.rr-right:hover:before {
  border-right-color: #34495e;
}


/* text positioning & styles */.rr-text {
  margin-top: 5%;
  margin-left: 10%;
  width: 80%;
  text-align: left;
  font-family: Arial;
  color: #FFFFFF;
}

.rr-texth3 {
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
}

.rr-textp {
  font-size: 13px;
}

<container><divclass="rr-left"><divclass="rr-text"><h3>rr-left div</h3></div></div><divclass="rr-mid"><divclass="rr-text"><h3>rr-mid</h3></div></div><divclass="rr-right"><divclass="rr-text"><h3>rr-right div</h3></div></div></container>

Solution 2:

Here is a solution that is actually responsive as each element is 33%.

Hope this help. I'll be around if you need anything else. :)

/* build the rectangles */.rr-left,
.rr-right,
.rr-middle {
  position: relative;
  height: 200px;
  background: #2c3e50;
}

.rr-middle { 
background: aqua;
right: 33%;
}

.rr-left {
  float: left;
  z-index: 9;
  width: 33%;
}

.rr-right {
  float: right;
  z-index: 10;
  width: 33%;
  right: -33.5%;
}

.rr-middle {
  float: right;
  z-index: 10;
  width: 33%;
}


/* slanted edges using pseudo-elements */.rr-left:after,
.rr-right:before,
.rr-middle:after,
.rr-middle:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}

.rr-left:after {
  right: 0;
  border-left: 100px solid #2c3e50;
  /* razorblade color */border-bottom: 200px solid #FFFFFF;
  /* page background color */
}

.rr-right:before {
  left: -100px;
  border-right: 100px solid #2c3e50;
  /* razorblade color */border-top: 200px solid rgba(0, 0, 0, 0);
  /* transparent */
}

.rr-middle:after {
  right: 0;
  border-left: 100px solid aqua;
  /* razorblade color */border-bottom: 200px solid #FFFFFF;
  /* page background color */
}

.rr-middle:before {
  left: -100px;
  border-right: 100px solid aqua;
  /* razorblade color */border-top: 200px solid rgba(0, 0, 0, 0);
  /* transparent */
}




/* hover styles */.rr-left:hover,
.rr-right:hover {
  background: #34495e;
}

.rr-left:hover:after {
  border-left-color: #34495e;
}

.rr-right:hover:before {
  border-right-color: #34495e;
}


/* text positioning & styles */.rr-text {
  margin-top: 5%;
  margin-left: 10%;
  width: 80%;
  text-align: left;
  font-family: Arial;
  color: #FFFFFF;
}

.rr-texth3 {
  font-weight: bold;
  font-size: 30px;
  text-transform: uppercase;
}

.rr-textp {
  font-size: 13px;
}

<divclass="rr-left"><divclass="rr-text"><h3>rr-left div</h3></div></div><divclass="rr-middle"><divclass="rr-text"><h3>rr-middle div</h3></div></div><divclass="rr-right"><divclass="rr-text"><h3>rr-right div</h3></div></div>