0

Как можно реализовать Border в разных цветах на одной стороне? может кто то сталкивался Пример на изображении введите сюда описание изображения

1
  • через градиент свойство border-image или background-image(тоже градиент),примеры по первой ссылке google border linear gradient 19 фев 2018 в 9:10

1 ответ 1

4

ну как вариант, можно использовать before и after

.wrapper {
  position: relative;
  background-color: orange;
  width: 300px;
  padding: 30px;
}
.wrapper:before,
.wrapper:after {
  content: '';
  position: absolute;
  border: 7px solid;
  top: 0;
  bottom: 0;
}
.wrapper:before {
  left: 0;
  width: 20%;
  border-right: none;
  border-color: #1f9fda;
}
.wrapper:after {
  right: 0;
  width: 65%; /* calc(80% - 60px) */
  border-left: none;
  border-color: gray;
}
<div class="wrapper">
  <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, deleniti? Quidem quibusdam aperiam dolores provident! Voluptas quam nam debitis mollitia.</div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.