码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-16 10:30:05      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:

直角箭头:

技术分享

.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;
}

 

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

标签:

原文地址:http://www.cnblogs.com/doomjx/p/5775266.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!