答案 0 :(得分:1)
您可以使用伪元素将两个形状叠加在彼此之上,如下所示:
.x {
position: relative;
left: 50px;
top: 50px;
width: 260px;
height: 240px;
border-top-left-radius: 15px 130px;
border-top-right-radius: 15px 130px;
border-bottom-left-radius: 15px 130px;
border-bottom-right-radius: 15px 130px;
border: 30px solid #af8;
}
.x:after {
content: '';
position: absolute;
left: -20px;
top: -40px;
width: 240px;
height: 260px;
border-top-left-radius: 130px 15px;
border-top-right-radius: 130px 15px;
border-bottom-left-radius: 130px 15px;
border-bottom-right-radius: 130px 15px;
border: 30px solid #af8;
}
<div class="x"></div>
如果你想在内部形状上也有类似的圆角,你可以在它上面添加另一个元素和一个额外的伪元素:
.x {
position: relative;
left: 50px;
top: 50px;
width: 260px;
height: 240px;
border-top-left-radius: 15px 130px;
border-top-right-radius: 15px 130px;
border-bottom-left-radius: 15px 130px;
border-bottom-right-radius: 15px 130px;
border: 30px solid #af8;
}
.x:after {
content: '';
position: absolute;
left: -20px;
top: -40px;
width: 240px;
height: 260px;
border-top-left-radius: 130px 15px;
border-top-right-radius: 130px 15px;
border-bottom-left-radius: 130px 15px;
border-bottom-right-radius: 130px 15px;
border: 30px solid #af8;
}
.y {
position: absolute;
z-index: 10;
left: 5px;
top: -10px;
width: 250px;
height: 260px;
border-top-left-radius: 130px 10px;
border-top-right-radius: 130px 10px;
border-bottom-left-radius: 130px 10px;
border-bottom-right-radius: 130px 10px;
border: none;
background: #eee;
}
.y:after {
content: '';
position: absolute;
z-index: 10;
left: -5px;
top: 5px;
width: 260px;
height: 250px;
border-top-left-radius: 10px 130px;
border-top-right-radius: 10px 130px;
border-bottom-left-radius: 10px 130px;
border-bottom-right-radius: 10px 130px;
border: none;
background: #eee;
}
<div class="x">
<div class="y"></div>
</div>
答案 1 :(得分:0)
我不确定,这是你想要的,但你尝试过剪辑路径吗?你可以从内部和角落切割(使用路径或svg)。这样的事情:
-webkit-clip-path: polygon(25% 75%, 25% 25%, 75% 25%, 75% 75%, 85% 100%, 100% 85%, 100% 15%, 85% 0%, 15% 0%, 0% 15%, 0% 85%, 15% 100%, 85% 100%, 75% 75%);
clip-path: polygon(25% 75%, 25% 25%, 75% 25%, 75% 75%, 85% 100%, 100% 85%, 100% 15%, 85% 0%, 15% 0%, 0% 15%, 0% 85%, 15% 100%, 85% 100%, 75% 75%);