剪辑路径多边形圆边答案

【问题标题】：clip-path polygon rounded edge剪辑路径多边形圆边
【发布时间】：2020-09-22 08:16:34
【问题描述】：

我正在尝试圆化 div 的右下角，同时也倾斜 div 的底部。我的理解是，您不一定可以将椭圆与多边形结合使用，并且正在寻找有关如何完成此操作的一些指导。

我可以创建斜面，但是使用border-radius 时，斜面与圆角边缘并没有完全对齐。任何建议都非常感谢！

HTML：

<div class="test">
  <div class="bg"></div>
</div>

SCSS：

.test {
  position: relative;
  width: 75%;
  height: 600px;
  margin: 0 auto;

  .bg {
    background: orange;
    width: 100%;
    height: 483px;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0 0 120px 0;
    z-index: -1;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
            clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
  }
}

https://jsfiddle.net/d6u5bfej/3/

【问题讨论】：

你不能用 polygon 来做到这一点，（他们没有曲线）你需要一个 path - developer.mozilla.org/en-US/docs/Web/CSS/clip-path
相关：stackoverflow.com/q/57382396/8620333 / stackoverflow.com/q/61768893/8620333
那么使用clip-path: ellipse(0 0, 100% 0, 100% 92%, 0 100%); 对您不起作用？我刚刚检查了它，在我看来它看起来很不错。

标签： html css sass clip-path

【解决方案1】：

我希望这对你有帮助。用之前的伪类和transform skewy解决了。

SCSS：

.test {
position: relative;
width: 75%;
height: 600px;
margin: 0 auto;

.bg {
  width: 100%;
  height: 483px;
  position: relative;
  overflow:hidden;
  z-index: 0;
}

.bg:before {
    content: "";
    position:  absolute;
    background: orange;
    z-index: -1;
    top:0;
    left:0;
    bottom:0;
    right:0;
    border-bottom-right-radius: 120px;
    transform: skewy(-4deg);
    transform-origin: left bottom;
  }

}

.test {
  position: relative;
  width: 75%;
  height: 600px;
  margin: 0 auto; }
  .test .bg {
    width: 100%;
    height: 483px;
    position: relative;
    overflow: hidden;
    z-index: 0; }
  .test .bg:before {
    content: "";
    position: absolute;
    background: orange;
    z-index: -1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 120px;
    transform: skewy(-4deg);
    transform-origin: left bottom; }

<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="test">
            <div class="bg"></div>
        </div>
    </body>
</html>

【讨论】：