Goal is to achieve this.
I got till here.
how to curve the bottom edges? any help is appreciated.
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;
}
Maybe another way to do that?
.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>Goal is to achieved. Simple the polygon is taken in svg format
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1072.7 384" xml:space="preserve">
<style type="text/css">
.polygon_msg{fill:#ADD8E6;}
</style>
<path class="polygon_msg" d="M1072.7,25v295c0,13.8-11.2,25-25,25H558.9l-11,19l-11.5,20l-11.5-20l-11-19H25c-13.8,0-25-11.2-25-25V25 C0,11.2,11.2,0,25,0h1022.7C1061.5,0,1072.7,11.2,1072.7,25z"/>
</svg>Then the svg path is converted to css clip path with responsive width & height using online clip path generator.
.curved_message
{
width: 750px;
height: 384px;
clip-path: polygon(calc(100% - 0px) 25px, calc(100% - 0px) calc(100% - 64px), calc(100% - 0px) calc(100% - 64px), calc(100% - 0.082925000000387px) calc(100% - 61.950575px), calc(100% - 0.3273999999999px) calc(100% - 59.9466px), calc(100% - 0.72697500000027px) calc(100% - 57.994525px), calc(100% - 1.2751999999998px) calc(100% - 56.1008px), calc(100% - 1.965625px) calc(100% - 54.271875px), calc(100% - 2.7918000000002px) calc(100% - 52.5142px), calc(100% - 3.7472749999999px) calc(100% - 50.834225px), calc(100% - 4.8255999999999px) calc(100% - 49.2384px), calc(100% - 6.0203250000002px) calc(100% - 47.733175px), calc(100% - 7.3250000000003px) calc(100% - 46.325px), calc(100% - 8.7331749999998px) calc(100% - 45.020325px), calc(100% - 10.2384px) calc(100% - 43.8256px), calc(100% - 11.834225px) calc(100% - 42.747275px), calc(100% - 13.5142px) calc(100% - 41.7918px), calc(100% - 15.271875px) calc(100% - 40.965625px), calc(100% - 17.1008px) calc(100% - 40.2752px), calc(100% - 18.994525px) calc(100% - 39.726975px), calc(100% - 20.9466px) calc(100% - 39.3274px), calc(100% - 22.950575px) calc(100% - 39.082925px), calc(50% - -22.55px) calc(100% - 39px), calc(50% - -11.55px) calc(100% - 20px), calc(50% - -0.049999999999955px) calc(100% - 0px), calc(50% - 11.45px) calc(100% - 20px), calc(50% - 22.45px) calc(100% - 39px), 25px calc(100% - 39px), 25px calc(100% - 39px), 22.950575px calc(100% - 39.082925px), 20.9466px calc(100% - 39.3274px), 18.994525px calc(100% - 39.726975px), 17.1008px calc(100% - 40.2752px), 15.271875px calc(100% - 40.965625px), 13.5142px calc(100% - 41.7918px), 11.834225px calc(100% - 42.747275px), 10.2384px calc(100% - 43.8256px), 8.733175px calc(100% - 45.020325px), 7.325px calc(100% - 46.325px), 6.020325px calc(100% - 47.733175px), 4.8256px calc(100% - 49.2384px), 3.747275px calc(100% - 50.834225px), 2.7918px calc(100% - 52.5142px), 1.965625px calc(100% - 54.271875px), 1.2752px calc(100% - 56.1008px), 0.726975px calc(100% - 57.994525px), 0.3274px calc(100% - 59.9466px), 0.082924999999999px calc(100% - 61.950575px), 0px 25px, 0px 25px, 0.082925px 22.950575px, 0.3274px 20.9466px, 0.726975px 18.994525px, 1.2752px 17.1008px, 1.965625px 15.271875px, 2.7918px 13.5142px, 3.747275px 11.834225px, 4.8256px 10.2384px, 6.020325px 8.733175px, 7.325px 7.325px, 8.733175px 6.020325px, 10.2384px 4.8256px, 11.834225px 3.747275px, 13.5142px 2.7918px, 15.271875px 1.965625px, 17.1008px 1.2752px, 18.994525px 0.726975px, 20.9466px 0.3274px, 22.950575px 0.082924999999999px, calc(100% - 25px) 0px, calc(100% - 25px) 0px, calc(100% - 22.950575px) 0.082925px, calc(100% - 20.9466px) 0.3274px, calc(100% - 18.994525px) 0.726975px, calc(100% - 17.1008px) 1.2752px, calc(100% - 15.271875px) 1.965625px, calc(100% - 13.5142px) 2.7918px, calc(100% - 11.834225px) 3.747275px, calc(100% - 10.2384px) 4.8256px, calc(100% - 8.7331750000001px) 6.020325px, calc(100% - 7.3250000000003px) 7.325px, calc(100% - 6.020325px) 8.733175px, calc(100% - 4.8255999999999px) 10.2384px, calc(100% - 3.7472749999999px) 11.834225px, calc(100% - 2.7918px) 13.5142px, calc(100% - 1.9656249999998px) 15.271875px, calc(100% - 1.2752px) 17.1008px, calc(100% - 0.72697500000004px) 18.994525px, calc(100% - 0.3273999999999px) 20.9466px, calc(100% - 0.082924999999932px) 22.950575px);
background-color: #ADD8E6;
}<div class="curved_message"></div>Good polygon clip-path generator here http://bennettfeely.com/clippy/
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
Good manual here https://css-tricks.com/clipping-masking-css/
