css 下拉列表 三角 |css的复选按钮

/* 方法一：使用 border 实现三角形 */
.dropdown {
position: relative;
}
.dropdown::after {
content: "";
position: absolute;
border: 6px solid transparent;
border-top-color: #000;
top: 50%;
right: 10px;
transform: translateY(-50%);
}
/* 方法二：使用 transform 实现三角形 */
.dropdown {
position: relative;
}
.dropdown::after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 6px solid transparent;
border-top-color: #000;
top: 50%;
right: 10px;
transform: translateY(-50%) rotate(360deg);
}

方法一使用 border 来绘制三角，首先将容器设为相对定位，然后在容器的伪元素中使用 border 实现三角形。使用这种方法需要注意，要将容器的高度设为三角形的高度。

方法二使用 transform 来绘制三角，同样需要将容器设为相对定位。然后伪元素的宽度和高度都设置为 0，利用 border 实现三角形的效果。此时将 translate(-50%) 移动到纵向的中心位置，rotate(360deg) 使得三角向下。

无论使用哪种方法，都能实现下拉列表的三角效果，具体可以根据自己的需求选择相应的实现方式。