前端-css，三角箭头的实现

tl110110tl

已于 2022-06-27 21:49:44 修改

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： css

于 2022-04-02 13:42:36 首次发布

本文链接：https://blog.csdn.net/tl110110tl/article/details/123915829

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

目前我知道的只有2种三角

1.第一种实现方式，简单粗暴，没有兼容性。【图片】

2.第二种实现方式，是将盒子模型的宽高都设置为0，用border来实现

盒模型中，从外到内分别是margin，border，padding，width/height。

.temp{
	margin: 100px auto;
	width: 20px;
	height: 20px;
	border: 10px solid #000;
	border-top-color: green;
	border-right-color: red;
	border-bottom-color: blue;
	border-left-color: orange;
}

<div class="temp"></div>

浏览器显示盒子模型的border时，是这样的

当内部的宽高都设置为0时，是这样的

再将其中三边背景颜色设置为透明【transparent】

.arror{
	width: 0;
	height: 0;
	border-top: 10px solid #F0F;
	border-right: 10px dashed transparent;
	border-bottom: 10px dashed transparent;
	border-left: 10px dashed transparent;
}
<div class="arror"></div>

3.用压盖的思路，在同一个位置（定位实现）放2个一毛一样的上图三角。负责压盖的三角形，颜色设置为白色【设置为和大背景相同颜色】。同时和被压盖的三角差距2px，就得到了另一个三角箭头。

.arror1 , .arror2{
	width: 0;
	height: 0;
	border-top: 10px solid #F0F;
	border-right: 10px dashed transparent;
	border-bottom: 10px dashed transparent;
	border-left: 10px dashed transparent;
	position: absolute;
	top :0;
	left:0;
}
.arror2 {
    //这是负责压盖的盒子，让这个盒子和下面的盒子错峰2像素
	top: -2px;
    //同时设置此盒子的颜色与背景颜色相同
	border-top: 10px solid #FFF;
}

<div class="box">
	<div class="arror1"></div>
	<div class="arror2"></div>
</div>

4.Iconfont 可以替代精灵图。（这个就是类似我们输入法中的特殊字符，人家把这个特殊的符号，做成了文字，font系列的样式可以对这种图标字体生效）

5.css3 实现【目前没学到】【20220525补】

思路：

1.弄一个盒子，有大小，让右边和下边有宽度并显示。

2.让这个盒子旋转45°，这样看上去就是个向下得三角。（根据旋转角度得不同，我们将得到任何方向得三角）

3.给这个盒子加动画就能实现鼠标经过时旋转了。（但是这个旋转，是旋转得盒子，旋转得中心默认是盒子得中心。我们可以将中心点 transform-origin 偏移让三角旋转起来更自然）

<style>
    .outer div:nth-child(3) {
        width: 6px;
        height: 6px;
        border-right: 2px solid yellow;
        border-bottom: 2px solid yellow;
        transform: rotate(45deg);
        transform-origin: 75% 75%;
        transition: all .2s;
    }
    
    .outer:hover div:nth-child(3) {
        transform: rotate(225deg);
    }
</style>
<body>
    <div class="outer">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>