Link to home
Start Free TrialLog in
Avatar of Member_2_7966984
Member_2_7966984

asked on

CSS Speech Bubbles with a gradient border

I am wanting to recreate these 2 speech bubbles that have rounded corners with a gradient border with CSS if possible-  


User generated imageright side


and left side 

User generated image

So when they are in a column row they would look something like this with some text in the middle

User generated image

here is the basic gradient I used else where for a button background containing the colors needed 


   background: -webkit-linear-gradient(left, #47cfec 0%,#75e1b3 0%,#47cfec 100%); 

Open in new window


Avatar of Noah
Noah
Flag of Singapore image

Hi!

Here is an example CSS code you can incorporate.

.speech-bubble {
  position: relative;
  display: inline-block;
  padding: 10px;
  background: -webkit-linear-gradient(left, #47cfec 0%,#75e1b3 0%,#47cfec 100%);
  color: white;
  font-size: 16px;
  line-height: 1.4;
  border-radius: 20px;
  max-width: 300px;
}

.speech-bubble::before, .speech-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
}

.speech-bubble::before {
  left: 0;
  border: 20px solid transparent;
  border-top-color: #47cfec;
  border-bottom: 0;
  margin-bottom: -20px;
}

.speech-bubble::after {
  left: 2px;
  border: 18px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
  margin-bottom: -18px;
  z-index: 1;
}

Open in new window


Here's an example HTML code to use the above CSS code:

<div class="speech-bubble">
  Hello! This is a speech bubble with a gradient border.
</div>

Open in new window

Avatar of Member_2_7966984
Member_2_7966984

ASKER

Thank you but the code you provided had the body of the speech bubble as the gradient it should be white 


https://codepen.io/rps-dev/pen/gOBvEPY 



You can change the background property to background: #fff;

Here's the updated code:

.speech-bubble {
  position: relative;
  display: inline-block;
  padding: 10px;
  background: #fff;
  color: white;
  font-size: 16px;
  line-height: 1.4;
  border-radius: 20px;
  max-width: 300px;
}

.speech-bubble::before, .speech-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 0;
  height: 0;
}

.speech-bubble::before {
  left: 0;
  border: 20px solid transparent;
  border-top-color: #47cfec;
  border-bottom: 0;
  margin-bottom: -20px;
}

.speech-bubble::after {
  left: 2px;
  border: 18px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
  margin-bottom: -18px;
  z-index: 1;
}

Open in new window

Thank you 


- I tried the latest code and the border went away


https://codepen.io/rps-dev/pen/gOBvEPY


ASKER CERTIFIED SOLUTION
Avatar of Noah
Noah
Flag of Singapore image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial