@unixon1995

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

Помогите пожалуйста c данной реализацией, сижу и не могу понять как правильно это сделать.
Вообщем по примеру видно, что из нижнего угла в верхний угол проходит линия 1px под 45deg. Как сделать так чтобы height: 500px, и при этом было все адаптивно.
5c973b950bc69031933494.jpeg
  • Вопрос задан
  • 664 просмотра
Решения вопроса 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
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@soledar10
html css3 js jquery
Ответ написан
Комментировать
.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);
}
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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