我想把一个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%);
}
}
希望对你有帮助.用之前的伪类和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>