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

Question

[Александр]

Как реализовать подобный эффект "border" ? На ум приходит только абсолютно позиционированный элемент, но как сделать такой "переход" из бирюзового в белый ?

Answer 1

[Ivan Bogachev]

Абсолютное позиционирование, вырезание картинок, 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

Answer 2

[cristalex]

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

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

Comments

[Александр]

Спасибо, буду пробовать. К счастью это макет из интернета и запускать ничего в дизайнеров не придется :)

Answer 3

[Alex-HAV]

А исходный код можно посмотреть?

Comments

[Александр]

Был бы код я б не задавал этот вопрос) так только набросок и непонимание что делать дальше
https://jsfiddle.net/jcm7eqy1/8/