SOURCE

<div class="p square"></div>
<div class="p square1"></div>
<div class="p square2"></div>
<div class="p square3"></div>

.p{
    margin:10px
}
.square{
    width: 100px;
    height: 100px;
    border:  50px solid;
    /* background-color: red; */
    border-color: #893615 #E76B56 #A72310 #0C1F22;
}

.square1{
    width: 100px;
    height: 100px;
    border:  10px solid;
    border-color: #893615 #E76B56 #A72310 #0C1F22;
    box-sizing: border-box;
}

.square2{
    width:0;
    height: 0;
    border:  50px solid;
    border-color: #893615 #E76B56 #A72310 #0C1F22;
}

.square3{
    width:0;
    height: 0;
    /* transparent 透明色 */
    border:  50px solid transparent; 
    border-bottom-color: red
}