洛丽糖

以上代码扒自“handsome主题”，仅供学习参考，如果用于商业请自行承担相关后果。

css代码

.xm-wx-tip{
  display: inline-block;
  width: calc(100% - 40px);
  background: #eef6fd;
  padding: 8px 20px;
  border-radius: 4px;
  margin-bottom: 5px;
  margin-top: 5px;
  color: #777;
}
.xm-wx-tip:before {
  background: #38a3fd;
  border-radius: 50%;
  color: #fff;
  content: "i";
  font-size: 15px;
  height: 21px;
  line-height: 21px;
  margin-left: -32px;
  margin-top: 5px;
  position: absolute;
  text-align: center;
  width: 21px;
}

.xm-wx-tip-info{
  border-left: 3px solid #38a3fd;
}
.xm-wx-tip-info:before {
  background: #38a3fd;
  color: #fff;
  content: "i";
}

.xm-wx-tip-success{
  border-left: 3px solid #2e9f0f;
}
.xm-wx-tip-success:before {
  background: #2e9f0f;
  color: #fff;
  content: "\221a";
}

.xm-wx-tip-share{
  border-left: 3px solid #404040;
}
.xm-wx-tip-share:before {
  color: #fff;
 background:#404040;
 content:"\0040"
}

.xm-wx-tip-warning{
  border-left: 3px solid #ff7800;
}
.xm-wx-tip-warning:before {
  color: #fff;
 background:#ff7800;
 content:"\0021"
}

.xm-wx-tip-error{
  border-left: 3px solid #ed0000;
}
.xm-wx-tip-error:before {
  color: #fff;
 background:#ed0000;
 content:"\00D7"
}

html代码

<div class="xm-wx-tip xm-wx-tip-info">
购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买
</div>
<div class="xm-wx-tip xm-wx-tip-success">
购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买
</div>
<div class="xm-wx-tip xm-wx-tip-share">
购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买
</div>
<div class="xm-wx-tip xm-wx-tip-warning">
购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买
</div>
<div class="xm-wx-tip xm-wx-tip-error">
购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买须知购买前请务必阅读购买
</div>

演示