剪辑路径多边形圆边

Question

我试图使 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/

Answer 1

希望对您有所帮助。它是用之前的伪 class 和 tranform 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>

剪辑路径多边形圆边

clip-path polygon rounded edge

html

css

sass

clip-path