SOURCE

<div class="top"></div>
<hr/>
<div class="bottom"></div>
<hr/>
<div class="left"></div>
<hr/>
<div class="right"></div>
<hr/>
<div class="top1"></div>
<hr/>
<div class="bottom1"></div>
<hr/>
<div class="left1"></div>
<hr/>
<div class="right1"></div>

/*填充*/
.top {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 20px solid black;
}
.bottom {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 20px solid black;
}
.left {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 20px solid black;
}
.right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 20px solid black;
}
/*线*/
.top1 {
  width: 40px;
height: 40px;
border-right: 4px solid #000;
border-bottom: 4px solid #000;
transform: rotate(225deg);
}
.bottom1 {
width: 40px;
height: 40px;
border-right: 4px solid #000;
border-bottom: 4px solid #000;
transform: rotate(45deg);
}
.left1 {
width: 40px;
height: 40px;
border-right: 4px solid #000;
border-bottom: 4px solid #000;
transform: rotate(315deg);
}
.right1 {
width: 40px;
height: 40px;
border-right: 4px solid #000;
border-bottom: 4px solid #000;
transform: rotate(-225deg);
}