<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.info-type-one{
width: 120px;
height: 30px;
border: 1px solid #EEE;
margin: 0 auto;
text-align: center;
line-height: 30px;
}
.info-panel-triple{
width: 0;
height: 0;
border: 8px solid transparent;
border-bottom-color: hsla(0,0%,6%,.6);
position: absolute;
left: 16px;
top: -16px;
}
.info-panel-content{
display: inline-block;
position: relative;
margin-top: 15px;
height: 30px;
line-height: 30px;
background-color: hsla(0,0%,6%,.6);
color: #FFF;
text-align: left;
padding-left: 15px;
padding-right: 12px;
border-radius: 3px;
font-size: 0.8rem;
letter-spacing: 0.1rem;
}
</style>
</head>
<body>
<div class="info-type-one">
<!-- 内容区域 -->
<div class="">
测试内容！
</div>
<!-- 显示提示区域 内容 -->
<div class="info-panel-content">
<!-- 显示提示框区域 三角区域 -->
<div class="info-panel-triple"></div>
啦
</div>
</div>
</body>
</html>
