Create a box with CSS styling

Question

I need to create a box as shown in the attached image with CSS styling. Is it possible to do with CSS or would I have to use the image.

Here you go: nicolasgallagher.com/pure-css-speech-bubbles/demo — Jatin
– Jatin, Commented Mar 12, 2014 at 21:39

zoranc · Accepted Answer · 2014-03-12 22:12:30Z

1

Here's as close as I could get in 10 minutes...

jsFiddle Demo

#bubble {
  width: 300px; 
  height: 180px; 
  background: #ddd;
  box-shadow: 0 0 1px #333;
  position: absolute;
}
#bubble:before {
  content:"";
  position: absolute;
  width: 0;
  height: 0;
  border-bottom: 36px solid transparent;
  border-left: 18px solid #ddd;
  border-right: 13px solid transparent;
  margin: 180px 0 -25px 240px;
  transform:rotate(10deg);
  -webkit-transform:rotate(10deg);
  -ms-transform:rotate(10deg);
}

There's scope for improvement - the 'border' (actually a drop shadow) is only present on the main box, not the arrow, but it otherwise does a decent job on fidelity: the arrow shape and angle are all there.

Hope that helps.

edited Mar 12, 2014 at 22:12

zoranc

2,4541 gold badge22 silver badges34 bronze badges

answered Mar 12, 2014 at 21:56

Grant Gibson

8135 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nickspiel · Accepted Answer · 2014-03-12 21:54:21Z

0

There is a great tool here that makes this effect very simple. Highly customizable too. Once you can see how it is working it is easy to tweak for example moving the arrow further to the right rather than dead center.

answered Mar 12, 2014 at 21:54

nickspiel

5,7506 gold badges35 silver badges49 bronze badges

Collectives™ on Stack Overflow

Create a box with CSS styling

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related