Как сделать плавный изгиб - переход от красной части меню к чёрной
1,00
р.
Это можно сделать используя CSS? Или придётся картинкой делать?
Ответ
Решение на чистом CSS
Правда совсем небольшой дефект виден, но это уже если всматриваться. Думаю, что пользователи сайта этого как правило не делают :) Но зато есть градиент и вся задумка решена на 99,9%.
UPD Улучшил ответ. Теперь дефект практически не заметен. А также учёл замечания @Alexandr_TT и @ArtemGorlachev и добавил ещё дополнительно адаптивный вариант. Адаптивность конечно получилась не совсем та, что хотелось, но постараюсь доработать.
.nav { position: relative overflow: hidden height: 80px width: 100% margin: 0 auto margin-bottom: 10px } .nav__left { position: relative overflow: hidden float: left height: 80px width: 49% background: linear-gradient(to bottom, red, darkred) } .nav__right { position: relative overflow: hidden float: right height: 80px width: 49% background: linear-gradient(to bottom, gray, black) } .transition { position: absolute overflow: hidden top: 0 left: 0 right: 0 margin: 0 auto height: 80px width: 180px } .transition__red { position: absolute left: 0 top: 0 height: 80px width: 100px background: linear-gradient(to bottom, gray, black) } .transition__red:after { content: "" display: block height: 80px width: 100px border-radius: 0px 90px 0px 0px / 0px 100% 0px 0px background: linear-gradient(to bottom, red, darkred) } .transition__black { position: absolute right: 0 top: 0 height: 80px width: 100px background: linear-gradient(to bottom, red, darkred) } .transition__black:after { content: "" display: block height: 80px width: 100px border-radius: 0 0 0 100% / 0 0 0 100% background: linear-gradient(to bottom, gray, black) } .transition__clear { position: absolute left: -56px top: 0px width: 170px height: 80px border-radius: 0 100% 0 0 background: linear-gradient(to bottom, red, darkred) } .transition__clear:after { content: "" display: block position: absolute top: 0px right: 0px left: -151px width: 300px height: 80px border-radius: 0% 60% 0% 0% background: linear-gradient(to bottom, red, darkred) } span { margin: 0 20px color: white line-height: 80px font-size: 20px font-family: monospace } .nav__left span { float: left } .nav__right span { float: right } .block__left { position: relative overflow: hidden float: left height: 80px width: 49% border-radius: 5px background: linear-gradient(to bottom, red, darkred) } .block__right { position: relative overflow: hidden float: right height: 80px width: 49% border-radius: 5px background: linear-gradient(to bottom, gray, black) }
Адаптивный вариант:
body, html { margin: 0 padding: 0 } .nav { position: relative overflow: hidden height: 100vh min-height: 80px max-height: 30vh width: 100% margin: 0 auto margin-bottom: 10px } .nav__left { position: relative overflow: hidden float: left height: 100vh min-height: 80px max-height: 30vh width: 49% background: linear-gradient(to bottom, red, darkred) } .nav__right { position: relative overflow: hidden float: right height: 100vh min-height: 80px max-height: 30vh width: 49% background: linear-gradient(to bottom, gray, black) } .transition { position: absolute overflow: hidden top: 0 left: 0 right: 0 margin: 0 auto height: 100vh min-height: 80px max-height: 30vh width: 180px } .transition__red { position: absolute left: 0 top: 0 height: 100vh min-height: 80px max-height: 30vh width: 100px background: linear-gradient(to bottom, gray, black) } .transition__red:after { content: "" display: block height: 100vh min-height: 80px max-height: 30vh width: 100px border-radius: 0px 90px 0px 0px / 0px 100% 0px 0px background: linear-gradient(to bottom, red, darkred) } .transition__black { position: absolute right: 0 top: 0 height: 100vh min-height: 80px max-height: 30vh width: 100px background: linear-gradient(to bottom, red, darkred) } .transition__black:after { content: "" display: block height: 100vh min-height: 80px max-height: 30vh width: 100px border-radius: 0 0 0 100% / 0 0 0 100% background: linear-gradient(to bottom, gray, black) } .transition__clear { position: absolute left: -56px top: 0px width: 170px height: 100vh min-height: 80px max-height: 30vh border-radius: 0 100% 0 0 background: linear-gradient(to bottom, red, darkred) } .transition__clear:after { content: "" display: block position: absolute top: 0px right: 0px left: -151px width: 300px height: 100vh min-height: 80px max-height: 30vh border-radius: 0% 60% 0% 0% background: linear-gradient(to bottom, red, darkred) } span { margin: 0 20px color: white line-height: 80px font-size: 20px font-family: monospace } .nav__left span { float: left } .nav__right span { float: right }
