css3 纯css实现绘制三角形、箭头效果

最新推荐文章于 2024-08-20 23:23:54 发布

liu__software

最新推荐文章于 2024-08-20 23:23:54 发布

阅读量3.6k

点赞数

分类专栏： css3 文章标签： css3

原文链接：https://blog.csdn.net/weixin_43565197/article/details/99866780

版权

css3 专栏收录该内容

49 篇文章 2 订阅

订阅专栏

本文介绍了如何使用CSS来创建各种方向的箭头和三角形，包括利用边框(border)、伪元素(before/after)以及CSS3的transform旋转来实现。详细展示了向下、向左等不同方向的三角形和箭头的代码示例，同时提供了实心箭头和自定义颜色的实现方法。

摘要由CSDN通过智能技术生成

在前端工作中遇到三角形或者需要箭头的样式，我们不仅可以利用图片来实现效果，还可以利用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; /*通过覆盖调整箭头粗细*/
}