Как реализовать подобный эффект?

Как реализовать подобный эффект "border" ? На ум приходит только абсолютно позиционированный элемент, но как сделать такой "переход" из бирюзового в белый ?5aa571b678fb3209343530.jpeg
  • Вопрос задан
  • 363 просмотра
Решения вопроса 1
sfi0zy
@sfi0zy
UI developer. Верстаю неверстаемое.
Абсолютное позиционирование, вырезание картинок, before/after... Ох и понапридумывают всякого...
.example {
    background: linear-gradient(to right, #F0F3BD, #F0F3BD), // левая граница
        linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // верхняя
        linear-gradient(to right, #F0F3BD 0%, #F0F3BD 70%, #fff 70%, #fff 100%), // нижняя
        linear-gradient(to right, #fff, #fff); // правая
    background-size: .5rem 100%, 100% .5rem, 100% .5rem, .5rem 100%;
    background-position: top left, top left, bottom left, top right;
    background-repeat: no-repeat;
}

Один элемент. Один фон. Для всего остального есть CSS.
codepen
5aa57a2048bd2215197814.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@cristalex
Вариантов напрашивается несколько:
1) Вырезать эту обводку картинкой и подкладывать картинку на фон. Но возникнут проблемы если размер блока меняется.
2) Сделать обводку основного блока голубым цветом. А сверху уже накладывать другой блок (можно использовать before или after) с границей белого цвета (левую границу отключить). Сам блок позиционировать абсолютно поверх основной границы.

А ну и не забыть объяснить дизайнеру что так делать не стоит даже если этого очень сильно хочет заказчик. Да и у самих дизайнеров часто фантазия так разгуляется, что разработчику хочется запустить в них что-то тяжёлое...
Удачи!!
Ответ написан
@Alex-HAV
А исходный код можно посмотреть?
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы