SOURCE

<p>CSS实现提示框</p>

<div class="tip">

<div class="inner"></div>
  <div class="text">
    <span>输入提示框标题:</span>
      <br>
    <span>输入提示信息输入提示信息</span>
  </div>
</div>

.tip{
position:relative;
width:169px;

height:53px;

border:1px solid #000;

border-radius:4px;
background:#000;
}

.tip .inner{

background-color:#FFF;

width:10px;

height:10px;

border:1px solid #000;

/* 旋转小方块并调整位置形成尖角 */
background:#000;
position:relative;

top:16px;
right:6px;
transform:rotate(45deg);
display:inline-block;
border-right: 0px;
  border-top:0px;
}

.text {
  position:absolute;
  top:0px;
  left:10px;
  color:#FFF;
  font-size:12px;
}

.text span:first-child{
  font-weight:bolder;
  line-height:30px;
}