Можно ли при помощи CSS сделать такой плавный переход с красного на черный фон? Или с помощью чего и как это можно сделать?
Средствами css такое сделать реально, но неэффективно, легче просто вставить изображение изгиба в png/svg.
Можно использовать svg/png картинки как бэкграунд псевдоэлемента, который расположить на месте стыка. Вставлять в HTML не рекомендуется, так как там должны быть "значущие" элементы...
Можно на CSS - используйте псевдоэлементы и border-radius. Пример:
div {
float:left;
width:100px;
height: 20px;
}
.red {
background: red;
}
.black {
background: black;
border-bottom-left-radius: 40px;
margin-left: -20px;
position: relative;
}
.black::before,.black::after {
content: '';
display: block;
height: 10px;
width:20px;
position: absolute;
left: -18px;
top: 0px;
}
.black::before {
background: black;
}
.black::after {
background: red;
border-top-right-radius: 10px;
}
<div class="red"></div>
<div class="black"></div>
На примере border-radius
body {
margin: 0;
}
* {
box-sizing: border-box; //необязательно
}
.perehod {
width: 100%;
height: 40px;
}
.perehod .red {
background: linear-gradient(to bottom, #C5453A, #A31716);
height: 100%;
width: 75%;
border-radius: 0px 90px 0px 0px / 0px 100% 0px 0px;
}
.perehod .black {
background: linear-gradient(to bottom, #444444, #202020);
height: 100%;
}
<div class="perehod">
<div class="black">
<div class="red"></div>
</div>
</div>
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Виртуальный выделенный сервер (VDS) становится отличным выбором
Добрый деньНикак не могу изменить цвет у некоторой g в svg при наведении
Есть курсовая работаТема курсовой работы "Автоматизированная система ЗАГС"