SOURCE

<!-- 例一 -->
<p class="arrow"></p>

<!-- 例二 -->
<div id="talkbubble"></div>
<!-- 例三 -->
<div class="arrow_box"></div>
<!-- 例四 -->
<div class="box">  </div>

.arrow {
    width:0;
    height:0;
    font-size:0;
    border:solid 10px;
     
/* border-color
:#f00 #0f0 #00f #000;
} */

border-color
:red  yellow #00f #000;
}
/* 例二 */
#talkbubble {
  margin-left:30px;
  width: 120px;
  height: 80px;
  background: red;
  position: relative;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}
#talkbubble:before {
 content:"";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}
#talkbubble:after{
  content:"";
  position:absolute;
  top:100%;
  right:10px;
  width:0;
  height:0;
  border: solid transparent;
  /* border-color: rgba(136, 183, 213, 0); */
	border-top-color: #88b7d5;
	border-width: 20px;
	/* margin-left: -30px; */
  /* border-bottom:20px silid red; */
}
/* 例三 */
.arrow_box {
	position: relative;
	background: #88b7d5;
	border: 4px solid #8196a3;
  margin-top:50px;
  height:50px;
}
.arrow_box:after, .arrow_box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(136, 183, 213, 0);
	border-top-color: #88b7d5;
	border-width: 30px;
	margin-left: -30px;
}
.arrow_box:before {
  border-color: rgba(129, 150, 163, 0);
  border-top-color: #8196a3;
  border-width: 36px;
  margin-left: -36px;
}
/* 例四 */
.box{
    position: relative;
  margin-top:20px;
    width: 200px;
    height: 200px;
    border: 2px solid #fff;
    background-color: #fff;
}
.box:before{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 200px;
    top: 20px;
    border-left: 20px solid #000;
    border-top: 10px solid transparent;
    border-bottom: 20px solid transparent;
}
.box:after{
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    left: 200px;
    top: 23px;
    border-left: 10px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}