How to do diagonally using after and skew?

Asked

Viewed 355 times

-1

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

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

But the edge on the after is not appearing.

Below is an example of what I want.

inserir a descrição da imagem aqui

css div

  • PUT THE CODE.

  • What you’ve been trying to do?

  • was just testing.slide:after{ border:2px Solid red; } . slide { Transform: skew(20deg); width: 100%; height: 700px; background: blue; }

  • 1

    Possible duplicate of Creation of diagonal div

1 answer

0

You can achieve this by using the css property instead 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;. It’s enough to work with CSS to get what you want.

  • Yeah, but that way it will transform the content of the div as well.

  • I would advise you to leave the transform after the -ms-transform. The last valid for the browser is what will be used. No practical effect I know, but it is a very common practice.

  • Obg gnt get here ! mt obg

Browser other questions tagged css div

You are not signed in. Login or sign up in order to post.