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

Привет всем, я пытаюсь использовать CSS для создания эффекта вырезания, но он довольно зернистый. Итак, я создал сценарий того, как это выглядит:

http://jsfiddle.net/n0p25hq8/5/

Мой CSS, который я использую для эффекта вырезания:

section.services .item-2 .text::before{
content:'';
position:absolute;
width:100%;
height:2em;
left:0;
right:0;
top:-2em;
margin:0 auto;
background:radial-gradient(ellipse 60% 2em at 50% 0,transparent 100%,#fff 0);
z-index:-1
}

Если бы кто-то мог помочь мне сделать это гладко, было бы здорово!

0
0
246
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Один из способов решить эту проблему - увеличить размытие градиента, поэтому мы применили это к .text: before

background: radial-gradient(ellipse 60% 2em at 50% 0,transparent 98%, #fff 100%);

Вот рабочий пример, вы можете поиграть с прозрачным процентом, чтобы увеличить / уменьшить плавность.

Ответ принят как подходящий

Вместо радиального фона на :: before выберите радиус границы с небольшим изменением положения:

Для пункта 2 - уже существующий css за вычетом радиального фона:

section.services .item-2 .text::before{
   content:'';
   position:absolute;
   width:100%;
   height:2em;
   left:0;right:0;top:-2em;margin:0 auto;
/* background:radial-gradient(ellipse 60% 2em at 50% 0, transparent 100%,#fff 0); */
z-index:-1}

задайте элементу 2 фон белого цвета для фона :: before черного цвета, на котором он будет сидеть, и уменьшите высоту, чтобы правильно выровнять его с элементами 1 и 3:

section.services .item-2{
  background: white;
  box-sizing:border-box;
  height:163px;
}

подтяните текст до уровня текста в пунктах 1 и 3:

section.services .item-2 .text{
  padding-top:1px;
}

радиус нижней границы, более 100% и смещенный влево для создания правильной кривизны:

section.services .item-2 .text::before{
  content:'';
  position:absolute;
  top:-4em;
  transform:translateX(-5%);
  width:110%;
  height:2em;left:0;right:0;margin:0 auto;
  display:block;
  background:#000;
  border-radius: 0 0 100% 100%;
}

Обновлен jsfiddle: http://jsfiddle.net/n0p25hq8/7/

Другие вопросы по теме