本文作者:DurkBlue

css3 绘制三角形箭头样式推荐

css3 绘制三角形箭头样式摘要: 在前端工作中遇到三角形或者需要箭头的样式,我们不仅可以利用图片来实现效果,还可以利用css来实现。<div class="triangle"&g...

在前端工作中遇到三角形或者需要箭头的样式,我们不仅可以利用图片来实现效果,还可以利用css来实现。

<div class="triangle"></div>


1、利用border来实现

(1)向下三角形

.triangle{	width: 0; 	height: 0; 	border-width: 100px; 	border-style: solid; 	border-color:#ff0000 transparent transparent transparent;}

css3 绘制三角形箭头样式 第1张

(2)向左三角形

.triangle{	width: 0; 	height: 0; 	border-width: 50px; 	border-style: solid; 	border-color: transparent #ff0000 transparent transparent;}

css3 绘制三角形箭头样式 第2张

(3)利用 CSS3 transfrom 旋转 45 度实现三角形

<div class="triangle"><span>css3 transfrom 三角形</span><div class="transform"></div></div>

 

.triangle {position:relative;width:200px;height:60px;line-height:60px;background:#E9FBE4;box-shadow:1px 2px 3px #E9FBE4;border:1px solid #C9E9C0;border-radius:4px;text-align:center;color:#0C7823;}.transform {position:absolute;bottom:-8px;bottom:-6px;left:30px;overflow:hidden;width:13px;height:13px;background:#E9FBE4;border-bottom:1px solid #C9E9C0;border-right:1px solid #C9E9C0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}

css3 绘制三角形箭头样式 第3张

css3 绘制三角形箭头样式 第4张 

总结: transparent是透明的意思,也就是与背景色同化。 

2、利用伪类实现箭头

<div class="arrow" ></div>

(1)向左箭头

.arrow{position: relative;}.arrow:before,.arrow:after{position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px transparent dashed;border-bottom: 20px transparent dashed;border-right: 20px #fff solid;}.arrow:before{border-right: 20px #ff0000 solid;}.arrow:after{left: 4px; /*通过覆盖调整箭头粗细*/border-right: 20px #fff solid;}

css3 绘制三角形箭头样式 第5张

(2)向上箭头

.arrow{position: relative;}.arrow:before,.arrow:after{position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px transparent dashed;border-right: 20px transparent dashed;border-bottom: 20px #fff solid;}.arrow:before{border-bottom: 20px #ff0000 solid;}.arrow:after{top: 4px; /*通过覆盖调整箭头粗细*/border-bottom: 20px #fff solid;}

css3 绘制三角形箭头样式 第6张

(3)利用 CSS3 transfrom 旋转 来实现多方向箭头

比如:向下箭头

.arrow{position: relative;}.arrow:before,.arrow:after{position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px transparent dashed;border-right: 20px transparent dashed;border-bottom: 20px #fff solid;}.arrow:before{border-bottom: 20px #ff0000 solid;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);}.arrow:after{border-bottom: 20px #fff solid;-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg);transform:rotate(180deg);bottom: -36px; /*通过覆盖调整箭头粗细*/}

css3 绘制三角形箭头样式 第7张 

 

 

css 箭头简单的样式实现效果

1.左箭头

  css3 绘制三角形箭头样式 第8张

div {undefined
   border: 6px solid #fff;
    border-top: none;  /*去掉会变成原本的宽高12*/
    border-right-color: transparent;
    border-bottom-color: transparent;

}

css3 绘制三角形箭头样式 第9张

此篇文章由DurkBlue发布,请自觉转载请注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 04-14
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,177人围观)参与讨论

还没有评论,来说两句吧...