Как сверстать треугольный вырез на фоне?

Question

[Александр Осадчий]

Здравствуйте!

Есть верхний блок с гладиентным фоном..и есть контентная часть с белым, как сверстать треугольный вырез как на скриншоте, чтоб это было кроссбраузерно?



По идее, можно через псевдо-элементы (before, after), но я не нашел ничего похожего(

UPD:

Точнее - там такое полузакругление:

Comments

[Danny Arty]

а где тут треугольный вырез? или вы имеете в виду стрелки?

[Александр Осадчий]

Danny Arty, Обновил..там скругление синего градиента на фоне..очень плавное

Answer 1

[Фин Дел]

через псевдо

Answer 2

[Ankhena]

https://jsfiddle.net/Ankhena/x6y3hgt1/
Альтернативы:
1. Псевдо больше размером и подобрать border-radius
2. SVG

Comments

[Александр Осадчий]

Первый вариант - круто...но как туда вместо картинки цвета градиента вкрутить?

$gradient_color_left
$gradient_color_right

@mixin radial-gradient($gradient_color_left, $gradient_color_right) {
  background-image: radial-gradient(
    66.44% 66.44% at 49.87% 28.39%,
    $gradient_color_left 0%,
    $gradient_color_right 100%
  );
}

[Ankhena]

Александр Осадчий,
так и написать как в написали у себя в коде.
И картинка и градиент это background-image. Заменяете одно на другое и вперед.

[Ankhena]

Александр Осадчий, https://jsfiddle.net/chq5eLmz/
размеры только градиенту задайте