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

希望这对您有所帮助。它是使用before伪类和歪斜变换解决的。

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>

剪切路径多边形圆角

1 个答案: