@unixon1995

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

Помогите пожалуйста c данной реализацией, сижу и не могу понять как правильно это сделать.
Вообщем по примеру видно, что из нижнего угла в верхний угол проходит линия 1px под 45deg. Как сделать так чтобы height: 500px, и при этом было все адаптивно.
5c973b950bc69031933494.jpeg
  • Вопрос задан
  • 623 просмотра
Решения вопроса 1
HamSter007
@HamSter007
HTML/CSS верстальщик
Например с помощью 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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы