Page Widget How to - Create a bubble with Arrow and Drop Shadow

Question

We would like to know how to create a bubble with Arrow and Drop Shadow.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
/* Center content in the middle of the screen */
html, body, div {<!--from   www  .  j a  va 2  s  . c o m-->
  height: 100%;
  width: 100%;
  margin: 0px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
}
/* Make a box that fills 50% of screen */
.box {
  background-color: pink;
  width: 50%;
  height: 50%;
  border-radius: 25px;
  box-shadow: 3px 3px 4px #000;
}
/* Make an arrow */
.arrow {
  background-color: pink;
  box-shadow: 3px 3px 4px #000;
  width: 30px;
  height: 30px;
  /* Translate the box up by width / 2 then rotate */
  -webkit-transform: translateY(-15px) rotate(45deg);
}
</style>
</head>
<body>
  <div class="box">I'm a big beautiful box!</div>
  <div class="arrow"></div>
</body>
</html>

The code above is rendered as follows: