html三角形下拉列表,CSS—纯CSS实现三角图形（常用于带指引效果的小三角，下拉列表的小三角等）...

常用情况，如下图

图片.png

图片.png

CSS代码

.we-chat-info::after{

position: absolute;

top: 109px;

right: -8px;

content: '';

display: inline-block;

border-top: 9px solid transparent;

border-bottom: 9px solid transparent;

border-left: 9px solid white;

}

CSS原理解析

1、当我们把border设置为

.we-chat-info::after{

position: absolute;

top: 109px;

right: -8px;

content: '';

display: inline-block;

border-top: 20px solid red;

border-bottom: 20px solid rebeccapurple;

border-left: 20px solid rosybrown;

border-right: 20px solid royalblue;

}

可以看到如下图所示

图片1.png

2、当我们把border设置为

.we-chat-info::after{

position: absolute;

top: 109px;

right: -8px;

content: '';

display: inline-block;

border-top: 20px solid red;

border-bottom: 20px solid rebeccapurple;

border-left: 20px solid rosybrown;

}

可以看到如下图所示

图片2.png

所以我们只要把上下两条边设置为透明(transparent)的就可以实现三角形了，同理，可以自行编写三角形的朝向