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

DurkBlue 2022-04-14 26302

默认

摘要： 在前端工作中遇到三角形或者需要箭头的样式，我们不仅可以利用图片来实现效果，还可以利用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;}

(2)向左三角形

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

(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);}

总结： 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;}

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

(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; /*通过覆盖调整箭头粗细*/}

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

1.左箭头

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

}