создать плавную кривую в клипе: многоугольник - PullRequest
Новая
       9

создать плавную кривую в клипе: многоугольник

0 голосов
/ 31 января 2019

У меня есть элемент div, в который я хочу добавить внутреннюю кривую, используя путь обрезки: polygon css ...

Я получил базовую форму, но не могу сгладить кривую.

enter image description here

HTML: 

<div id="clip_element">
</div>

CSS: 

#clip_element {
  background-image: -webkit-linear-gradient(bottom, #c0c0c0, #adadad, #9a9a9a, #888888, #767676);
  background-image: -o-linear-gradient(bottom, #c0c0c0, #adadad, #9a9a9a, #888888, #767676);
  background-image: linear-gradient(to top, #c0c0c0, #adadad, #9a9a9a, #888888, #767676);  
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-clip-path: polygon(0% 0%,100% 0%,100% 70%,90% 80%,80% 90%,70% 100%,0% 100%);
  clip-path: polygon(0% 0%,100% 0%,100% 70%,90% 80%,80% 90%,70% 100%,0% 100%);
  }

Как сделать кривую гладкой с помощью пути клипа: многоугольник

1 Ответ

0 голосов
/ 31 января 2019

Это можно сделать с помощью псевдоэлемента :after.Вот ответ с помощью этого.Надеюсь, это поможет. 

#clip_element {
width:200px;
height:75px;
  background-image: -webkit-linear-gradient(bottom, #c0c0c0, #adadad, #9a9a9a, #888888, #767676);
  background-image: -o-linear-gradient(bottom, #c0c0c0, #adadad, #9a9a9a, #888888, #767676);
  background-image: linear-gradient(to top, #c0c0c0, #adadad, #9a9a9a, #888888, #767676);  
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  position:relative;  
  }
  div#clip_element:after {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    background: #fff;
    right: -10px;
    bottom: -30px;
    border-radius: 50%;
}
<div id="clip_element">
</div>
...