在剪辑路径中生成平滑曲线：多边形

Question

我有一个 div 元素，我想在其中使用剪辑路径添加内部曲线：多边形 css...

我已经完成了基本形状，但无法平滑曲线。

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%);
  }

如何使用 clip-path:polygon 使曲线平滑？

Answer 1

您可以通过使用伪元素: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>