SOURCE

<strong>
  通过伪类:before :after实现三角形:
</strong>
<div id="demo1" class="box">
</div>
<div id="demo2" class="box">
</div>
<div id="demo3" class="box">
</div>
<div id="demo4" class="box">
</div>
<strong>
  通过border+transform:rotate(...deg)实现三角形:
</strong>
<div id="demo5" class="box">
</div>
<div id="demo6" class="box">
</div>
<div id="demo7" class="box">
</div>
<div id="demo8" class="box">
</div>

/* 方法一 */

.box {
  width: 100px;
  height: 100px;
  margin: 0 0 16px 30px;
  background-color: #fff;
  position: relative;
  border: 2px solid #000;
  overflow: visible;
}

#demo1:after,
#demo1:before,
#demo2:after,
#demo2:before,
#demo3:after,
#demo3:before,
#demo4:after,
#demo4:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
}


/*右三角*/

#demo1:after {
  border-width: 10px;
  border-left-color: #fff;
  top: 20px;
  left: 100%;
}

#demo1:before {
  border-width: 12px;
  border-left-color: #000;
  top: 18px;
  left: 100%;
}


/* 左三角 */

#demo2:after {
  border-width: 10px;
  border-right-color: #fff;
  top: 20px;
  left: -20px;
}

#demo2:before {
  border-width: 12px;
  border-right-color: #000;
  top: 18px;
  left: -24px;
}


/* 上三角 */

#demo3:after {
  border-width: 10px;
  border-bottom-color: #fff;
  bottom: 100%;
  left: 20px;
}

#demo3:before {
  border-width: 12px;
  border-bottom-color: #000;
  bottom: 100%;
  left: 18px;
}


/* 下三角 */

#demo4:after {
  border-width: 10px;
  border-top-color: #fff;
  top: 100%;
  left: 20px;
}

#demo4:before {
  border-width: 12px;
  border-top-color: #000;
  top: 100%;
  left: 18px;
}


/*法法二*/

#demo5:after,
#demo6:after,
#demo7:after,
#demo8:after {
  position: absolute;
  content: '';
  width: 17px;
  height: 17px;
  background-color: #fff;
  border: 2px solid #fff;
  border-top-color: #000;
  border-right-color: #000;
  z-index: 2;
}


/* 右三角*/

#demo5:after {
  transform: rotate(45deg);
  left: 90px;
  top: 20px;
}

#demo6:after {
  transform: rotate(225deg);
  left: -11px;
  top: 20px;
}

#demo7:after {
  
transform: rotate(-45deg);
  bottom: 90px;
  
left: 20px;
}
#demo8:after{
  
transform: rotate(135deg);
  
top: 90px;
  
left: 20px;
}