0

I'm trying to create a message bubble that looks similar to this:

enter image description here

However, all I can manage is this:

enter image description here

Using this CSS:

#messaging #test:after {
  content: "";
  display: block; /* reduce the damage in FF3.0 */
  position: relative;
  bottom: 0px;
  left: 120px;
  width: 0;
  transform: rotate(180deg);
  border-width: 32px 30px 0;
  border-style: solid;
  border-radius-top: 10;
  border-color: black transparent;
}

I tried using border-radius, but it did not yeild the desired effect

Hobbyist
  • 15,888
  • 9
  • 46
  • 98

1 Answers1

0

I would try something like this - http://codepen.io/AndrewSepic/pen/EKJxqM

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
  margin-left: 2rem;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

You could add another element to protrude from the TV shape to create the talk bubble effect. For more ideas on what you can & can't do, I'd go here.

Andrew-ThinkUp
  • 521
  • 1
  • 7
  • 15
  • The question was on how to create the bubble effect, as you can see from the question I already have the box, as-well as an attachment. The issue is shaping the attachment. The link you provided was already provided in the comments and did not help – Hobbyist May 12 '16 at 19:13
  • @Hobbyist your message bubbles were not visually clear to me. But If I understand correctly you're going to need to make 2 shapes and put them together, to create what you're looking for. Good luck! – Andrew-ThinkUp May 16 '16 at 13:58