.sample2 {
position: relative;
color: #ffffff ;
background: #7acafb;
font-size: 16pt ;
line-height: 1;
margin: 20px -10px 20px -10px;
padding: 10px 5px 10px 20px;
box-shadow:1px 3px 7px 0px #7acafb ;
border-top:3px solid #ff6347;
}
.sample2:after, sample2:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #333;
}
.sample2:after {
left: 0;
border-right: 5px solid #333;
}
.sample2:before {
right: 0;
border-left: 5px solid #333;
} 
body{
color:#000;
background:#fff url(http://gahag.net/img/201510/14s/gahag-0014229900-2.png) 0% 0% fixed repeat;
-webkit-background-size:100px 100px;
-moz-background-size:100px 100px;
background-size:100px 100px;
}.myDiv{
   background:url(
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAABmJLR0QA/wD/AP+gvaeTAAAAiElEQVQYlWWQwQnDMAxFn7JDNjFZI9B7F/HdK3iB3gsZo0VZJSv8HFw7cf1BIKSvB1+Gb4IPVa/wAODpbzplR8wSh4RHtYXHMpul7IjsSEKF/CffJKHsaAKwPUJYrSyX6yCsZnu8rnrKolY38jSYGu1rQxgnjdTakvowg/lnqmG699zNTurecwJyn2r8BymzwwAAAABJRU5ErkJggg==
   ) repeat;
}