Как сделать плавный переход?

350
29 июня 2017, 02:52

Можно ли при помощи CSS сделать такой плавный переход с красного на черный фон? Или с помощью чего и как это можно сделать?

Answer 1

Средствами css такое сделать реально, но неэффективно, легче просто вставить изображение изгиба в png/svg.

Answer 2

Можно использовать 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>

Answer 3

На примере 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>

READ ALSO
Заливка участка g при наведении на SVG

Заливка участка g при наведении на SVG

Добрый деньНикак не могу изменить цвет у некоторой g в svg при наведении

330
Имитация таблицы CSS

Имитация таблицы CSS

Добрый деньЕсть разметка вида:

255
Когда правильнее делать дамп MySQL?

Когда правильнее делать дамп MySQL?

Есть курсовая работаТема курсовой работы "Автоматизированная система ЗАГС"

268