гладкий радиально-градиентный вырез css - PullRequest
Новая
       10

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

0 голосов
/ 26 октября 2018

Привет всем, я пытаюсь использовать 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
}

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

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Вместо радиального фона на :: 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 белый фон, чтобы фон черного цвета :: был расположен напротив него, и уменьшите высоту, чтобы выровнять его по элементам 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/

0 голосов
/ 26 октября 2018

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

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

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

...