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

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>

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

generate smooth curve in clip-path: polygon

css

clip-path