CSS How to make double diagonal border/corner

Question

guys. I'm working on the website and going to make thing like this one: enter image description here

Right now I have some kind of a half part of that shape:

<div id="block"> </div>

#block {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#block:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}

So it looks like this: enter image description here What can I do to draw it further? Like move another line above forward to the right and below? Thanks.

Answer 1

*{ margin: 0; padding: 0; }
body{ overflow: hidden; }
div.box{ display: block; width: 100%; background-color: red; margin-top: 100px; height: 100px; position: relative; }
div.box:before{ content: ""; position: absolute; right: -50px; top: -40px; width: 250px; height: 40px; background-color: red; transform: skew(-30deg) }

<div class="box">
  
</div>

You can find you anwer on this also you can adjust using transform css.