CODEWITHSUNDEEP
htmlcss
user2480288
user2480288

Reputation: 639

Create a box with CSS styling

strong text

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.

Upvotes: 0

Views: 179

Answers (2)

Grant Gibson
Grant Gibson

Reputation: 813

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.

Upvotes: 1

nickspiel
nickspiel

Reputation: 5630

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.

Upvotes: 0

Related Questions