divs diagonally how to do using after and skew?

Question

divs diagonally how to do using after and skew?

Navigation

#1 by (0 votes)

1

People I need to make a site where the divisions are diagonal.

I was told to put a border on after of div , and use the skew property.

But the border in after is not appearing.

Below is an example of what I want.

css div

asked by anonymous 17.01.2017 / 16:59

1 answer

How to query 2 tables inside a mysql database? [duplicate] Implemetar Script

score 0 · Answer 1

You can achieve this by using the css property transform .

div.skew {
  background-color: #2d2d2d;
  height: 100px;
  width: 150%;
  margin-bottom: 10px;
  transform: rotate(358deg) scale(1) skew(0deg) translate(0px);
  -webkit-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);
  -moz-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);
  -o-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);
  -ms-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);
}
.container {
  background-color: #7d7d7d;
  overflow: hidden;
  width: 100%;
}

<div class="container">
  <div class="skew">&nbsp;</div>
  <div class="skew">&nbsp;</div>
</div>

Everything is a design move, you can add a div with skew to a container with overflow: hidden; . You just need to work with CSS to get what you want.