SOURCE

<div class="three"></div>
<div class="tixing"></div>
<div class="zhijiao"></div>
<div class="circle"></div>

.three{
    width: 0;
    height:0;
    border-top: 100px red solid;
    border-bottom:100px solid transparent;
    border-right:100px solid transparent;
    border-left:100px solid transparent;
}
.tixing{
    width: 100px;
    height: 100px;
    border-top: 100px red solid;
    border-bottom:100px solid transparent;
    border-right:100px solid transparent;
    border-left:100px solid transparent;
}
.zhijiao{
    width: 0px;
    height: 0px;
    border-top: 100px red solid;
    border-bottom:100px solid transparent;
    border-right:0px solid transparent;
    border-left:100px solid transparent;
}
.circle{
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%
}