箭头样式形成，斜切角的思路

直角箭头：

.ra .ra:after{
content:" ";
display:inline-block;
width:0.6rem;
height:0.6rem;
border-width:0.2rem 0.2rem 0 0;
boeder-color:#cccccc;
transform:rotate(45deg);
position:absolute;
top:50%;
right:0;
margin-top:-4px;
}

圆角箭头：

.ra{
width:1.3rem;
height:1.3rem;
tranform:rotate(-45deg);
}

.ra:before{
right:0;
width:0.25rem;
height:1.3rem;
}

.ra:after,ra.before{
content:" ";
position:absolute;
background-color:#cccccc;
border-radius:0.2rem;
bottom:0;
}

斜切角思路:

.bevel{
border-right:1rem solid #ffffff;
border-bottom:1rem dashed transparent;
}

.bevel{
width:20rem;
height:20rem;
border:0.1rem solid #000000;
background:linear-gradient(-135deg,transparent 1.5rem,#655 0)top right;
}