@zveronol

Как сделать бордер по макету?

макет вот
5f6cf1d464a5b618083113.jpeg
https://jsfiddle.net/h4bq8rmv/
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
z80b
@z80b
Frontend
В вашей реализации нужно добавить еще border-radius, т.е.
.account__file {
  width: 230px;
  padding: 0 20px;
  padding-top: 75px;
  border: 2px dashed #8eb9f5;
  border-radius: 15px;
}


Лучше в css кажется не получится.
Другой вариант, можно заюзать svg. Т.е. подложить например под текст скругленный прямоугольник обведенный пунктиром.
<div class="account__file">
  <svg xmlns="http://www.w3.org/2000/svg" with="100%" height="100%" class="border">
    <rect x="0" y="0" rx="30" width="100%" height="100%" class="border-rect" />
  </svg>
  <input type="file" name="file" id="file" />
  <label for="file">
    <span class="account__subtitle">drag & drop</span>
    <div class="account__text">
      <p>Upload only png, jpg, jpeg</p>
    </div>
  </label>
</div>

классу .account__file прописать position: relative
css для svg:
.border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.border-rect {
  stroke: #8eb9f5;
  fill: #fff;
  stroke-width: 1;
  stroke-dasharray: 20;
}


Вот еще вариант с рамкой в качестве фона: https://z80b.github.io/qna.habr/
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
HunteR-VRX
@HunteR-VRX
Помешанный на развитии
.selector {
    border: dashed 1px #00f;
    border-radius: 8px;
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
26 окт. 2020, в 13:50
5000 руб./за проект
26 окт. 2020, в 13:47
2000 руб./за проект
26 окт. 2020, в 13:38
1500 руб./за проект