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

直角箭头：

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

圆角箭头：

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

.ra:before{
right:0;
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{
20rem;
height:20rem;
border:0.1rem solid #000000;
background:linear-gradient(-135deg,transparent 1.5rem,#655 0)top right;
}

--任何组织或个人分享、转载本博客内容，请务必以链接方式注明出处：来自博客园--下雨天的太阳（http://www.cnblogs.com/doomjx/）--
--请勿以任何形式修改内容（包括文字和图片）--