How to design below effect in a div without using any Images

Question

How can we design tip in bottom just like above without using any images. Below is my trail code:

<div id="coverImageToolTip"><p><font color="white">TIP:</font> UPLOAD YOUR<br/> COVER IMAGE HERE
    <div id="tail1"></div>
    <div id="tail2"></div>

#coverImageToolTip {
    position: absolute;
    z-index: 10;
    padding: 0px 4px;
    background-color: gray;
    bottom: 100px;
    left: 20%;
    border-radius: 10px;
    font-weight: bold;
    border-bottom: 5px solid black;
}


/* #tail1 {
    position:absolute;
    bottom:100px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
} */

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color: red transparent transparent  red  ;
    border-width:10px;
    border-style:solid;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}

Answer 1

A minimal markup version:

DEMO

HTML:

<div class='tooltip'>
  <span class='highlight'>tip:</span> upload your cover image here
<div>

Relevant CSS:

.tooltip {
  position: relative;
  margin: 1em auto;
  padding: .5em .2em;
  width: 10.5em; height: 3em;
  border-radius: .25em;
  box-shadow: 0 .2em 0 black;
  background: #999;
  font: 700 1.6em/1.5 sans-serif;
}
.tooltip:before {
  position: absolute;
  top: -.75em; right: -.75em;
  border: solid .2em;
  width: 1.5em; height: 1.5em;
  border-radius: 50%;
  background: black;
  color: #999;
  font: 900 .65em/1.5 sans-serif;
  content: 'x';
}
.tooltip:after {
  position: absolute;
  z-index: -1;
  right: 25%; bottom: -.75em;
  width: 2em; height: 2em;
  box-shadow: 0 .35em 0 black;
  transform: rotate(30deg) skewY(-60deg);
  background: inherit;
  content: '';
}
.highlight:after, .highlight:before {
  position: absolute;
  top: 100%; right: 31.025%;
  width: 1.725em; height: .2em;
  transform: skewX(-30deg);
  background: #999;
  content: '';
}
.highlight:after {
  right: 30.65%;
  transform: skewX(-60deg);
}

Answer 2

please see Pure css close button ( the close button in CSS ) and http://v2.desandro.com/resources/css-speech-bubble-icon/ for the actual trail.

Answer 3

You can do the close button and arrow in css but shadow for arrow is not possible.

Look at the code below

HTML

    <div id="coverImageToolTip">
    <div class="close"><a href="#">X</a></div>
    <p>
    <font color="white">TIP:</font> UPLOAD YOUR<br/> COVER IMAGE HERE
    </p>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS

      .close a{
    position:absolute;
    right:-5px; top:-8px;
    display:inline-block;
    background:black;
    padding:2px 6px;
    color:white;
    border:solid grey 3px;
    border-radius:22px;
    font-size:12px; 
    text-decoration:none
}
        #tail2 {
            position:absolute;
            bottom:-19px;
            left:80px;
            width:0;height:0;
            border-color: grey transparent transparent  grey  ;
            border-width:10px;
            border-style:solid;
            transform:rotate(90deg);
            -ms-transform:rotate(90deg); /* IE 9 */
            -moz-transform:rotate(90deg); /* Firefox */
            -webkit-transform:rotate(1deg); /* Safari and Chrome */
            -o-transform:rotate(90deg); /* Opera */
        }

DEMO

Answer 4

You can use before and after to simulate a shape close to your image for the arrow. Have a look at this demo: http://jsfiddle.net/j34um/3/