带曲线边缘的剪辑路径多边形
问题描述:
Goal is to achieve this.单击链接。带曲线边缘的剪辑路径多边形
我到了这里。如何弯曲底部边缘?任何帮助表示赞赏。
div class="curved-message"/> .curved-message{ background: 'lightblue'; clip-path: polygon(0% -20%, 100% 0%, 100% 90%, 56% 90%, 52% 100%, 48% 90%, 0% 90%); border-radius: 25px; margin-top: 250px; height: 345px; border-top: 4px solid white; border-left: 4px solid white; border-right: 4px solid white; max-width:750px; }
答
也许另一种方式来做到这一点?
.curved-message {
position: relative;
width: 300px;
height: 100px;
background: lightblue;
border-radius: 15px;
}
.curved-message:before {
content: "";
width: 30px;
height: 30px;
background: lightblue;
position: absolute;
bottom: -15px;
left: 50%;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
}
<div class="curved-message">
</div>
为什么这个问题已关闭投票。 – Kumaran