CODEWITHSUNDEEP
css
Kumaran
Kumaran

Reputation: 93

clip-path polygon with curve edges

Goal is to achieve this. enter image description here

I got till here.

enter image description 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;
}

Upvotes: 8

Views: 21247

Answers (3)

TKTK
TKTK

Reputation: 21

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>

Upvotes: 1

zloctb
zloctb

Reputation: 11177

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/

Upvotes: 0

Eezo
Eezo

Reputation: 1771

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>

Upvotes: 10

Related Questions