通过CSS实现普通三角形、直角三角形以及箭头

实现原理

1.普通三角形:盒子的宽高设为0,再设置上右下左的边框宽度,各个方向的边框将会均分border所占的位置,然后任由隐藏其中三个方向的border,剩下一个显示即可。

2.直角三角形: 盒子的宽高设为0,再随意选相邻两边的边框设置宽度(例如右上、右下、左上、左下),另外两边的边框宽度设为0(与前面对应左下、左上、右下、右上),然后任选设置了边框宽度的一边设置颜色,另外一边设置透明。

3.箭头:利用伪元素:before和:after在需要加箭头文本前后各创建一个三角形,然后通过定位将两个三角形移动到一起,通过相互遮挡来显示箭头。

代码部分

1.普通三角形

// html部分
<div class="trilateral"></div>
// css部分
.trilateral {
   width: 0;
   height: 0;
   font-size: 0;
   border: 30px solid transparent;
   border-left-color: red; // 根据需要选择显示的边,位置通过margin或者position进行调整
}

效果如下:
在这里插入图片描述

2.直角三角形

// html部分
<div class="right-triangle"></div>
// css部分
.right-triangle {
   width: 0;
   height: 0;
   font-size: 0;
   border-color: transparent;
   border-style: solid;
   border-width: 50px 0 0 50px; // 左上设置边框宽度
   border-left-color: #f00; // 根据需要选择显示的边,位置通过margin或者position进行调整
}

效果如下:
在这里插入图片描述

3.箭头

// html部分
<div class="arrows"></div>
// css部分
.arrows {
   position: relative;
   line-height: 20px;
}

.arrows:after, .arrows:before {
   width: 0;
   height: 0;
   font-size: 0;
   content: '';
   border: 10px solid transparent;
   border-left-color: #f00; // 选择显示的边
   position: absolute; // 通过定位调整位置
   left: 115px;
}

.arrows:before { // 将前面的伪元素向右移动,和后面的伪元素重合遮挡
   top: 0;
   bottom: 0;
   left: 111px;
   border-left-color: white; // 将透明改为和背景一样的颜色才能遮挡
   z-index: 1;
}

效果如下:
在这里插入图片描述

结尾

以上,若有说错的地方,还望各位兄台指出,灰常感谢。

推荐一款非常好用的截图软件:Snipaste

地址:https://zh.snipaste.com/index.html

讨论数量: 0

慎思笃行