Как сверстать данный элемент?

Question

[unixon1995]

Помогите пожалуйста c данной реализацией, сижу и не могу понять как правильно это сделать.
Вообщем по примеру видно, что из нижнего угла в верхний угол проходит линия 1px под 45deg. Как сделать так чтобы height: 500px, и при этом было все адаптивно.

Answer 1

[HamSter]

Например с помощью svg:

html:

<div class="box">
  <svg><line x1="0" y1="100%" x2="100%" y2="0" stroke-width="1" stroke="#fff"></line></svg>
</div>

css:

.box {
  width: 100%;
  height: 500px;
  position: relative;
}

svg {
  width: 100%;
  position: absolute;
  height: 100%;
  left: 0;
}

JSBIN

Answer 2

[Дмитрий]

Пример

Answer 3

[Андрей Ноготков]

.box {
  position: relative;
  width: 100%;
  height: 500px;
}
.box:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom right, transparent 50%, white 50%, white 50.1%, transparent 0);
}