SOURCE

<div class="test3"></div>
<br>
<div class="test1"></div>
<br>
<div class="test2"></div>
<br>

<!-- 实际应用 -->
<div class="msg">你好！恭喜发财</div>

.test1 {
    height: 0;
    width: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #000;
}
.test2 {
    height: 0;
    width: 0;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #000;
}
.test3 {
    height: 6px;
    width: 6px;
    border-top: 10px solid #c99952;
    border-right: 10px solid #ff3666;
    border-bottom: 10px solid #000;
}
.msg{
  position: relative;
  left: 30px;
  width: 200px;
  height: 50px;
  padding: 10px 15px;
  font-size: 14px;
  font-family: '微软雅黑';
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  filter: drop-shadow(0 0 1px #e2e2e2);
  background-color: #fff;
}
.msg::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -10px;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #e2e2e2;
}
.msg::after {
  content: '';
  position: absolute;
  top: 10px;
  left: -9px;
  height: 0;
  width: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 10px solid #fff;
}